Member Avatar for DeOiD

hi again

is there a way to change css rules using javascript? i have this:

<style type="text/css">
  .flash
  {
  position:absolute;
  left:52px;
  bottom:30px;
  }
  .logo
  {
  position:absolute;
  left:0px;
  top:20px
  }
  </style>

and i want to change .logo and .flash attributes depending on the window size...

thanks

  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Voynex

Dani AI

Generated

As asked about moving .logo and .flash with the window size, and offered useful starting points (change element styles on the DOM). There are three practical approaches today: let CSS handle it with media queries, update CSS values via JavaScript-safe mechanisms (CSS custom properties), or edit stylesheet rules through the CSSOM when you really need to change the stylesheet itself.

A simple, robust pattern is to use CSS custom properties and update those from JS. This keeps layout in CSS but lets JS tweak a few values on resize:

:root {
  --logo-left: 0px;
  --flash-bottom: 30px;
}

.logo { position: absolute; left: var(--logo-left); top: 20px; }
.flash { position: absolute; left: 52px; bottom: var(--flash-bottom); }
function applyVars() {
  const w = window.innerWidth;
  document.documentElement.style.setProperty('--logo-left', w < 480 ? '5px' : '0px');
  document.documentElement.style.setProperty('--flash-bottom', w < 480 ? '10px' : '30px');
}
window.addEventListener('resize', debounce(applyVars, 100));
applyVars();

function debounce(fn, wait) {
  let t;
  return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), wait); };
}

If you must alter existing stylesheet rules (not just inline styles), use the CSSOM: iterate document.styleSheets, find the rule, and adjust rule.style. Wrap access in try/catch because cross-origin style sheets are not readable; fall back to injecting a small style element when needed.

For details and browser notes see MDN on CSS custom properties (Using CSS custom properties) and the stylesheet API (CSSStyleSheet). Prefer media queries or CSS variables first; only use CSSOM when dynamic rule edits are unavoidable.

Recommended Answers

All 2 Replies

Member Avatar for ~s.o.s~

No, as far as I know, you can't do that. But you can surely get hold of all the elements which use that class and change their property which is what you must be aiming for, methinks.

<html>
<head>
    <style>
        .one
        {
            background-color: blue;
        }
        .two
        {
            background-color: green;
        }
    </style>
    <script>
    getElementsByClassName = function (needle)
    {
      var         my_array = document.getElementsByTagName("*");
      var         retvalue = new Array();
      var        i;
      var        j;

      for (i = 0, j = 0; i < my_array.length; i++)
      {
        var c = " " + my_array[i].className + " ";
        if (c.indexOf(" " + needle + " ") != -1)
          retvalue[j++] = my_array[i];
      }
      return retvalue;
    }

    function changeColor(name, color)
    {
        var elements = getElementsByClassName(name);
        for(var i = 0; i < elements.length; ++i)
        {    
            if(elements[i])
                elements[i].style.backgroundColor = color;
        }
    }
    </script>
</head>
<body>
    <form>
    <p class="one">Hello to all</p>
    <p class="two">Someone is here</p>
    <p class="one">Really? Who is he?</p>
    <p class="two">Do I know him?</p>
    <input type="button" value="Blue to Red" onclick="changeColor('one', 'red');" />
    <input type="button" value="Green to Yellow" onclick="changeColor('two', 'yellow');" />
    </form>
</body>
</html>
Member Avatar for Voynex

Yes, it is not possible to modify rules in the CSS file, but you can modify the style of the DOM node.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.