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

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>

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

This article has been dead for over six months. Start a new discussion instead.