Then record the JavaScript access style sheet
JavaScript can access the style attributes of elements in a Web page, such as:
<div id= "main" style= "background-color:red" ></div>
Accessing the Style property through JS
Alert (document.getElementById ("main"). Style.backgroundcolor);
Change the Style property through JS
document.getElementById ("main"). style.backgroundcolor= "Blue";
The above code is familiar to us, but usually we use style sheets to control the appearance properties of elements, such as:
<ptml> <pead> <meta http-equiv= "Content-type" C/> <title>js control css</title> <style Type = "Text/css" > #main {margin-left:200px; margin-top:70px; width:200px; height:100px; background-color999999; border:1px solid #666666; </style> </pead> <body> <div id= "main" >Show</div> <input type= "button" value= "Get style "/> <input type=" button "value=" Write style/> <input type= "button" value= "Get final Style"/> </body> </ptm L>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
At this point, if we use alert (document.getElementById ("main"). Style.backgroundcolor);
You can only get a null value, so you can only access the stylesheet through JS.
Document.stylesheets can get a collection of style sheets because there are a lot of differences between browsers, and the individual rules for accessing stylesheets are different. DOM specifies a cssrules set for each stylesheet, Mozilla and Safari correctly implement this standard, but unfortunately IE defines this set as rules, so you can use the following code to get the correct object:
var ocssrules=document.stylesheets[0].cssrules| | Document.stylesheets[0].rules;
This allows you to get a collection of CSS for different browsers.
Use the following JS code to get the style in the style sheet:
Copy Code code as follows:
function Getcss ()
{
var ocssrules=document.stylesheets[0].cssrules| | Document.stylesheets[0].rules;
alert (Ocssrules[0].style.backgroundcolor);
}
Stylesheets[0] represents the first style sheet reference, Ocssrules[0] represents the contents of the first style rule (that is, #main{}) and accesses the specific rule through the Style property.
Similarly, change the style sheet rule code as follows:
Copy Code code as follows:
function Setcss ()
{
var ocssrules=document.stylesheets[0].cssrules| | Document.stylesheets[0].rules;
Ocssrules[0].style.backgroundcolor= "Red";
Ocssrules[0].style.marginleft= "20px";
ocssrules[0].style.margintop= "20px";
}
Note, however, that because many elements are likely to be associated with the same style sheet, it is prudent to change.
In addition to the element's style object and CSS rules, each element also has a final style that tells us how the element was finally displayed on the screen, which is the style and CSS after the calculation. IE and Dom have two ways to access this style, ie in the Currentstyle property, using the getComputedStyle () method in the DOM.
The way JS gets the final style is as follows:
Copy Code code as follows:
function Getfinalcss ()
{
var Odiv=document.getelementbyid ("main");
Access Style Property
alert (ODiv.style.backgroundColor);
ie method
alert (ODiv.currentStyle.backgroundColor);
Dom method, and the second parameter is pseudo element, such as: Hover,first-leeter
Alert (Document.defaultView.getComputeStyle (odiv,null). BackgroundColor);
}
I often use currentstyle to get styles, eliminating the hassle of accessing style sheets.
It is not hard to understand that Currentstyle is a read-only property and cannot be assigned a value because it is a style rule that is synthesized by multiple styles.
For the getComputedStyle method, it can be invoked via Document.defaultview (IE and Safari do not support this method). Therefore, when using the getComputedStyle method, it is best to test on multiple browsers.
