For example: When we move the mouse to an icon, the icon will appear some animation effects (gradient amplification, flashing, replacement color, etc.), and all of this friendly effect is basically related to the style, so this one, I learn JavaScript on the style of operation.
Technical key point: style. This article requires us to have a certain understanding of CSS styles. (Readers can google the relevant content of CSS)
Operation steps:
1, the page code (including JS code) is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>style example</title>
<style type= "Text/css" >
Div.special
{
background-color:red;
height:50px;
width:50px;
}
</style>
<script type= "Text/javascript" >
function Getbackgroundcolor () {
var odiv = document.getElementById ("Div1");
alert (ODiv.style.backgroundColor);
}
</script>
<body>
<div id= "Div1" class= "Special" ></div>
<input type= "button" value= "Get BackGround Color" onclick= "Getbackgroundcolor ();" />
</body>
JS code to get the div object, and output the div object background color, everything looks so perfect, but the effect always let us down, as follows:
As a result, JavaScript's access to CSS styles in this way does not work, because CSS data is not stored in the style attribute, but is stored in the class. So the next thing to do: How to access the CSS class?
2. Luckily, we found the Document.stylesheets collection. Document.stylesheets contains references to all style sheets and all <style> elements in an HTML page.
Because of the different browsers, there are different ways to access individual rules in the stylesheet (rules: Specifying a CSS class, such as div.special in the HTML code above). The DOM specifies a Cssrules collection for each stylesheet, but IE names the collection as rules. So before you get a collection of styles, the code needs to make a tricky change:
Copy Code code as follows:
Ocssrules = Document.stylesheets[0].cssrules | | Document.stylesheets[0].rules;
Each rule contains the Selectortext attribute, and div.special is the Selectortext value of the CSS rule in the HTML above. The rule also contains the Style property, which allows you to get the background color from the style property. Let's look at the code:
Copy Code code as follows:
function Getbackgroundcolor () {
var ocssrules = Document.stylesheets[0].cssrules | | Document.stylesheets[0].rules;
alert (Ocssrules[0].style.backgroundcolor);
}
Code effect:
3, this time, you can modify the style to change the background color, but it is best not to do so, because you get rid of the CSS class, other references to the CSS class elements will change the background color, so if you need to modify the style, do a direct modification of the individual elements of the style attribute, For example: document.getElementById ("Div1"). style.backgroundcolor= "Blue";
