Home > Developer > JavaScript
1. obj. style can only get the inline Style written in the Tag. It cannot access the external css of those links and the style declared in the head.
Therefore, you must realize that on those pages that use external Css files, if you use style to assign values, such as obj. style = "color: red"; obviously, the effect is correct. The mystery is that a style attribute is added to the tag of the object, it is presented in a descending order of priority.
2. obj. currentStyle is much more powerful. He can get the style about all the positions of the node, but he also follows the priority. It means to display what he points to which style, in the following code, the font priority is blue, and currentStyle is displayed. color is blue, of course, style at this time. the color will also be blue.
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> testStyle </title>
<Style>
. Lala {
Color: yellow;
}
</Style>
</Head>
<Body>
<Div id = "tt" style = "color: blue;" class = "lala"> 1111 </div>
</Body>
<Script>
Alert (document. getElementById ("tt"). currentStyle. color );
</Script>
</Html>
If the style in the preceding <div> is removed as <div id = "tt" class = "lala"> 1111 </div>, currentStyle is used. color is converted to yellow based on the priority, but the style is displayed at this time. color is empty.
3. runtimeStyle: You can assign values to the style of a node, which will become the node style with the highest priority.
For example:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Style>
. Lala {
Color: yellow;
} </Style>
</Head>
<Body>
<Div id = "tt" style = "color: blue;" class = "lala"> 1111 </div>
</Body>
<Script>
Document. getElementById ("tt"). runtimeStyle. color = "black ";
Alert (document. getElementById ("tt"). currentStyle. color );
Alert (document. getElementById ("tt"). runtimeStyle. color );
Alert (document. getElementById ("tt"). style. color );
</Script>
</Html>
The color of the word displayed on the page is black after runtimeStyle value assignment. However, only currentStyle. color and runtimeStyle can obtain this value. style. color still obtains blue in the tag.
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
