Styles – alter with javascript

To alter style values within a html page via Javascript can be done two different ways, that I know of, one is via getting the object itself and then altering the style from that and the other is via the document style sheets object.

The document style sheets object is all of the styles on the web page and is index within an array manor. For example

       styleSheet = document.styleSheets[<insert number of object>]

But since the two main browsers (Internet Explorer and also Firefox) deal with the css rules within this object with a different reference (IE = rules and FF = cssRules).

       if (styleSheet.cssRules)
              cssRule = styleSheet.cssRules[0]; // Firefox
       else if (styleSheet.rules)
              cssRule = styleSheet.rules[0];         // IE

The other method is via the id of the object, to obtain this just need to use the javascript getElementById function with the document object.

       cssRule = document.getElementById(style)

And then once the object of the style is obtained with both functions can just alter the style of the object with the same code.

       if (cssRule.style.backgroundColor == colour)
              cssRule.style.backgroundColor = colour2;
       else
              cssRule.style.backgroundColor = colour;

Here is the full code

<html>
       <head>
              <style language="text/css">
                     h1 { background-color: lightblue;}
                     #pstyle { background-color : lightblue;}
              </style>       
              <script language="javascript">
                     function alterh1(colour, colour2)
                     {       
                            var styleSheet, cssRule;
                            if (document.styleSheets)
                            {
                                   styleSheet = document.styleSheets[0];
                                   if (styleSheet)
                                   {
                                          if (styleSheet.cssRules)
                                                 cssRule = styleSheet.cssRules[0]; // Firefox
                                          else if (styleSheet.rules)
                                                 cssRule = styleSheet.rules[0];         // IE
                                          if (cssRule)
                                          {
                                                 if (cssRule.style.backgroundColor == colour)
                                                        cssRule.style.backgroundColor = colour2;
                                                 else
                                                        cssRule.style.backgroundColor = colour;
                                          }
                                   }
                            }
                     }
 
                     function alterstyle(style,colour, colour2)
                     {
                            var cssRule;
                            cssRule = document.getElementById(style);
                            if (cssRule)
                            {
                                   if (cssRule.style.backgroundColor == colour)
                                          cssRule.style.backgroundColor = colour2;
                                   else
                                          cssRule.style.backgroundColor = colour;
                            }
                     }
              </script>
 
       </head>
       <body>
              <h1>Change this style</h1>
              <input type="submit" value="click here" onclick="javascript:alterh1('blue', 'lightblue')"/>
 
              <p id="pstyle">
                     HI there
 
              <input type="submit" value="click here" onclick="javascript:alterstyle('pstyle','blue','lightblue')"/>       
       </body>
 
</html>

<html> <head> <style language="text/css"> h1 { background-color: lightblue;} #pstyle { background-color : lightblue;} </style> <script language="javascript"> function alterh1(colour, colour2) { var styleSheet, cssRule; if (document.styleSheets) { styleSheet = document.styleSheets[0]; if (styleSheet) { if (styleSheet.cssRules) cssRule = styleSheet.cssRules[0]; // Firefox else if (styleSheet.rules) cssRule = styleSheet.rules[0]; // IE if (cssRule) { if (cssRule.style.backgroundColor == colour) cssRule.style.backgroundColor = colour2; else cssRule.style.backgroundColor = colour; } } } } function alterstyle(style,colour, colour2) { var cssRule; cssRule = document.getElementById(style); if (cssRule) { if (cssRule.style.backgroundColor == colour) cssRule.style.backgroundColor = colour2; else cssRule.style.backgroundColor = colour; } } </script> </head> <body> <h1>Change this style</h1> <input type="submit" value="click here" onclick="javascript:alterh1('blue', 'lightblue')"/> <p id="pstyle"> HI there <input type="submit" value="click here" onclick="javascript:alterstyle('pstyle','blue','lightblue')"/> </body> </html>

Leave a Reply