Home > Developer > JavaScript
Record the Javascript access style sheet
Javascript can access the style attributes of elements in a webpage, for example:
<Div id = "main" style = "background-color: red"> </div>
Access style attributes through js
Alert (document. getElementById ("main"). style. backgroundColor );
Modifying style attributes through js
Document. getElementById ("main"). style. backgroundColor = "blue ";
The above code is familiar to us, but we usually use a style sheet to control the appearance attributes of elements, for example:
<Html> <pead> <meta http-equiv = "Content-Type" c/> <title> JavaScript 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> Show <input type = "button" value = "Get style"/> <input type = "button" value = "Write style" /> <input type = "button" value = "get final style"/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Now, if we use alert (document. getElementById ("main"). style. backgroundColor );
Only one null value can be obtained, so you can only access the style sheet through js.
Document. styleSheets can obtain a set of style sheets, because the browsers are very different, and the rules for accessing style sheets are also different. DOM specifies a cssRules set for each style sheet. Mozilla and Safari correctly implement this standard. Unfortunately, IE defines this set as rules, so you can use the following code to obtain the correct object:
Var ocssrules?document.stylesheets=02.16.css Rules | document. styleSheets [0]. rules;
In this way, the CSS set of different browsers can be obtained.
Use the following JS Code to obtain the style in the style sheet:
Copy codeThe Code is as follows:
Function GetCSS ()
{
Var ocssrules?document.stylesheets=02.16.css Rules | document. styleSheets [0]. rules;
Alert (oCssRules [0]. style. backgroundColor );
}
StyleSheets [0] indicates the first style table reference, oCssRules [0] indicates the first style rule (that is, the content of # main {}), and uses the style attribute to access specific rules.
Similarly, the Code for changing the style sheet rule is as follows:
Copy codeThe Code is as follows:
Function SetCSS ()
{
Var ocssrules?document.stylesheets=02.16.css Rules | 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 many elements may be associated with the same style sheet, so be careful when changing the style sheet.
In addition to the style object and css rules of the element, each element also has a final style that tells us how the element is finally displayed on the screen, that is, the style after overlapping Calculation of style and css. IE and DOM can access this style in two ways. IE uses the currentStyle attribute, and DOM uses the getComputedStyle () method.
The method for JS to obtain the final style is as follows:
Copy codeThe Code is 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 and first-leeter.
// Alert (document. defaultView. getComputeStyle (oDiv, null). backgroundColor );
}
I often use currentStyle to obtain styles, saving the trouble of accessing style sheets.
It should be noted that currentStyle is a read-only attribute and cannot be assigned a value to it, because it is a style rule after multiple styles are integrated, which is not difficult to understand.
For the getComputedStyle method, you can call it through document. defaultView (IE and Safari do not support this method). Therefore, when using the getComputedStyle method, it is best to test it in multiple browsers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
