Javascript access style sheet implementation code_javascript skills

Let’s record Javascript’s access to the style sheet
Javascript can access the style attribute of elements in the web page, for example:

Access the style attribute through js
alert(document.getElementById("main").style.backgroundColor);

Change the style attribute 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 attributes of elements, for example:

<meta http-equiv="Content-Type" c> <title>JS controls CSS</title> <style type="text/css"> #main { margin-left:200px; margin-top:70px; width:200px; height:100px; background-color<img src="/static/imghwm/default1.png" data-src="/editor/images/smilies/default/17.gif" class="lazy" / alt="Javascript access style sheet implementation code_javascript skills" >999999; border:1px solid #666666; } </style> <div id="main">Show</div> <input type="button" value="获得样式"> <input type="button" value="写入样式"> <input type="button" value="获得最终样式">
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

If at this time If we use alert(document.getElementById("main").style.backgroundColor);

, we can only get a null value, so we can only access the style sheet through js.
document.styleSheets You can get a collection of style sheets, because browsers are very different, and the individual rules for accessing style sheets are also different. The DOM specifies a cssRules collection for each style sheet. Mozilla and Safari implement this standard correctly, but unfortunately in IE Define this collection 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 way You can get the CSS collection of different browsers.
Get the styles in the style sheet through the following JS code:

Copy the code The code is 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 first style rule (i.e. #main {}), access specific rules through the style attribute.
Similarly, change the style sheet rule code as follows:

Copy code The code is 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";
}

However, it should be noted that because many elements may be associated with the same style sheet, you need to be careful when making changes.
In addition to the style object and css rules of the element, Each element also has a final style. The final style is used to tell us how the element is finally displayed on the screen, that is, the style after the coincidence calculation of style and css. IE and DOM have two ways to access this style. In IE Through the currentStyle attribute, use the getComputedStyle() method in DOM.
The method for JS to obtain the final style is as follows:

Copy code Code As follows:

function GetFinalCSS()
{
var oDiv=document.getElementById("main");
//Access the style attribute
alert(oDiv.style .backgroundColor);
//IE method
alert(oDiv.currentStyle.backgroundColor);
//DOM method, the second parameter is a pseudo element, such as: hover, first-leeter, etc.
//alert(document.defaultView.getComputeStyle(oDiv,null).backgroundColor);
}

I often use currentStyle to get the style, saving the trouble of accessing the style sheet
It should be noted that currentStyle is a read-only property and cannot be assigned a value, because it is a style rule calculated comprehensively from multiple styles, which is not difficult to understand.
For the getComputedStyle method, you can use document.defaultView. call (IE and Safari do not support this method). So, when using the getComputedStyle method, it is best to test on multiple browsers.