{"id":214,"date":"2009-07-27T22:27:20","date_gmt":"2009-07-27T21:27:20","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=214"},"modified":"2009-07-27T22:27:20","modified_gmt":"2009-07-27T21:27:20","slug":"styles-alter-with-javascript","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2009\/07\/27\/styles-alter-with-javascript\/","title":{"rendered":"Styles – alter with javascript"},"content":{"rendered":"

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.<\/p>\n

The document style sheets object is all of the styles on the web page and is index within an array manor. For example<\/p>\n

\r\n       styleSheet = document.styleSheets[]\r\n<\/pre>\nBut 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).<\/p>\n
\r\n       if (styleSheet.cssRules)\r\n              cssRule = styleSheet.cssRules[0]; \/\/ Firefox\r\n       else if (styleSheet.rules)\r\n              cssRule = styleSheet.rules[0];         \/\/ IE\r\n<\/pre>\nThe other method is via the id of the object, to obtain this just need to use the javascript getElementById function with the document object.<\/p>\n
\r\n       cssRule = document.getElementById(style)\r\n<\/pre>\nAnd then once the object of the style is obtained with both functions can just alter the style of the object with the same code.<\/p>\n
\r\n       if (cssRule.style.backgroundColor == colour)\r\n              cssRule.style.backgroundColor = colour2;\r\n       else\r\n              cssRule.style.backgroundColor = colour;\r\n<\/pre>\nHere is the full code<\/p>\n
\r\n\r\n       \r\n