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
</p>
<input type="submit" value="click here" onclick="javascript:alterstyle('pstyle','blue','lightblue')"/>
</body>
</html>
|
- Tutorials