Record the Javascript access stylesheet
Javascript can access the style attributes of elements in web pages, for example:
<div style="background-color:red"></div>
Accessing style attributes through js
alert(("main").);
Change style attributes through js
("main").="blue";
The above code is familiar to us, but we usually use style sheets to control the appearance properties of elements, for example:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
At this time, if we use alert(("main").);
You can only get one empty value, so you can only access the stylesheet through js.
You can get a collection of style sheets because there are very different browsers, and the separate rules for accessing style sheets are also different. DOM specifies a collection of cssRules for each style sheet. Mozilla and Safari correctly implement this standard. Unfortunately, this collection is defined as rules in IE, so you can use the following code to get the correct object:
var oCssRules=[0].cssRules||[0].rules;
This way you can get a collection of CSS for different browsers.
Get the styles in the stylesheet with the following JS code:
function GetCSS()
{
var oCssRules=[0].cssRules||[0].rules;
alert(oCssRules[0].);
}
styleSheets[0] represents the first style sheet reference, and oCssRules[0] represents the first style rule (that is, the content of #main{}), and the specific rules are accessed through the style attribute.
Similarly, the code for changing the stylesheet rules is as follows:
function SetCSS()
{
var oCssRules=[0].cssRules||[0].rules;
oCssRules[0].="red";
oCssRules[0].="20px";
oCssRules[0].="20px";
}
However, it should be noted that because many elements may be associated with the same style sheet, you need to be careful when changing.
In addition to the element's style object and css rules, 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 style and css overlap. IE and DOM have two ways to access this style. In IE, the currentStyle property is used, and the getComputedStyle() method is used in DOM.
The method of obtaining the final style by JS is as follows:
function GetFinalCSS()
{
var oDiv=("main");
//Access the style attribute
alert();
//IE method
alert();
//DOM method, the second parameter is a pseudo-element, such as:hover, first-leeter, etc.
//alert((oDiv,null).backgroundColor);
}
I often use currentStyle to get styles, saving the hassle of accessing stylesheets
It should be noted that currentStyle is a read-only property and cannot be assigned a value because it is a style rule after comprehensive calculation of multiple styles, which is not difficult to understand.
For the getComputedStyle method, it can be called by (IE and Safari do not support this method). Therefore, when using the getComputedStyle method, it is best to test it on multiple browsers.
Javascript can access the style attributes of elements in web pages, for example:
<div style="background-color:red"></div>
Accessing style attributes through js
alert(("main").);
Change style attributes through js
("main").="blue";
The above code is familiar to us, but we usually use style sheets to control the appearance properties of elements, for example:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
At this time, if we use alert(("main").);
You can only get one empty value, so you can only access the stylesheet through js.
You can get a collection of style sheets because there are very different browsers, and the separate rules for accessing style sheets are also different. DOM specifies a collection of cssRules for each style sheet. Mozilla and Safari correctly implement this standard. Unfortunately, this collection is defined as rules in IE, so you can use the following code to get the correct object:
var oCssRules=[0].cssRules||[0].rules;
This way you can get a collection of CSS for different browsers.
Get the styles in the stylesheet with the following JS code:
Copy the codeThe code is as follows:
function GetCSS()
{
var oCssRules=[0].cssRules||[0].rules;
alert(oCssRules[0].);
}
styleSheets[0] represents the first style sheet reference, and oCssRules[0] represents the first style rule (that is, the content of #main{}), and the specific rules are accessed through the style attribute.
Similarly, the code for changing the stylesheet rules is as follows:
Copy the codeThe code is as follows:
function SetCSS()
{
var oCssRules=[0].cssRules||[0].rules;
oCssRules[0].="red";
oCssRules[0].="20px";
oCssRules[0].="20px";
}
However, it should be noted that because many elements may be associated with the same style sheet, you need to be careful when changing.
In addition to the element's style object and css rules, 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 style and css overlap. IE and DOM have two ways to access this style. In IE, the currentStyle property is used, and the getComputedStyle() method is used in DOM.
The method of obtaining the final style by JS is as follows:
Copy the codeThe code is as follows:
function GetFinalCSS()
{
var oDiv=("main");
//Access the style attribute
alert();
//IE method
alert();
//DOM method, the second parameter is a pseudo-element, such as:hover, first-leeter, etc.
//alert((oDiv,null).backgroundColor);
}
I often use currentStyle to get styles, saving the hassle of accessing stylesheets
It should be noted that currentStyle is a read-only property and cannot be assigned a value because it is a style rule after comprehensive calculation of multiple styles, which is not difficult to understand.
For the getComputedStyle method, it can be called by (IE and Safari do not support this method). Therefore, when using the getComputedStyle method, it is best to test it on multiple browsers.