Javascript controls CSS style sheets

Next, record the method used by JS to control CSS.

1. Use javascript to change the attributes of a css class...

<Style type = "text/css">
. Orig {
Display: none;
}
</Style>
You want to change the display attribute from none to inline.
Solution: in IE:

Document. styleSheets [0]. rules [0]. style. display = "inline ";
In firefox:

Document.stylesheets%0%.css Rules [0]. style. display = "inline ";
Discussion: You can create a function to search for style objects with specific names:

Function getstyle (sname ){
For (var I = 0; I <document. styleSheets. length; I ++ ){
Var rules;
If (document.stylesheetspolici}.css Rules ){
Rules = document.stylesheetspolici2.16.css Rules;
} Else {
Rules = document. styleSheets [I]. rules;
}
For (var j = 0; j <rules. length; j ++ ){
If (rules [j]. selectorText = sname ){
// The selectorText attribute is used to replace a selected address. It means to get the CLASSNAME of RULES [J]. If there is something wrong, correct it.
Return rules [j]. style;
}
}
}
}
Then, as long:

Getstyle (". orig"). display = "inline ";
You can.
------------------ Pay attention to document. styleSheets [0]. rules [0]. style: The subscript of the styleSheets [0] array represents the nth CSS style table on this page, the array subscript of its lower-level rules [0] indicates the nth style in the style table, for example:
<Style type = "text/css">
. S {display = "none ";}
. W {display = "none ";}
</Style>
Modify S: document. styleSheets [0]. rules [0]. style. display = 'inline ';
Modify W: document. styleSheets [0]. rules [1]. style. display = 'inline ';
Note: the combination of CSS and HTML must be <LINK rel = "stylesheet" type = "text/css" href = ""/> or <style> </style>. feasible, for example, @ IMPORT does not work.
==========================================
The following is a record of the style in JS access CSS:
Use javascript to get and set the style
The DOM standard introduces the overwrite style table concept. When we use document. getElementById ("id "). style. when backgroundColor gets a style, it only obtains the background color set in the style attribute of id. If the style attribute in id does not set background-color, it returns NULL, that is to say, if the id uses the class attribute to reference an external style table, the background color set in this external style table, so sorry document. getElementById ("id "). style. backgroundColor is difficult to write. To obtain the settings in the external style sheet, you need to use the getComputedStyle () method of the window object. The Code writes window. getComputedStyle (id, null ). backgroundColor
But the compatibility problem comes again, so it is easy to write in firefox, but it is difficult to make it in IE
Both are compatible
Window. getComputedStyle? Window. getComputedStyle (id, null). backgroundColor: id. currentStyle ["backgroundColor"];
If the background color is obtained, the returned values in firefox and IE are different. In IE, the returned values are "# ffff99", while in firefox, the returned values are "rgb (238, 44, 34 )"
It is worth noting that window. getComputedStyle (id, null) is not allowed to set the style and can only be obtained. To set it, you must also write the id. style. background = "# EE2C21 ";
In IE, CURRENTSTYLE can only be read-only.

This article is only for learning, excerpted from the combination of online search materials, without any copyright, can be reproduced at will, if the original author has different ideas, you can contact me at any time.


Use JavaScript to modify CSS attributes

Only the native javascript code is written.

1. Use JS to modify the class attribute value of a tag:

The class attribute is one of the methods for referencing a style sheet on a label. Its value is a style sheet selector. If the value of the class attribute is changed, the style table referenced by the label is replaced, so this is the first modification method.

The code for changing the class attribute of a tag is:

Document. getElementById (id). className = string;
Document. getElementById (id) is used to obtain the DOM object corresponding to the tag. You can also use other methods. ClassName is an attribute of a DOM object. It corresponds to the class attribute of the tag. A string is a new value of the class attribute. It should be a defined CSS selector.

This method can be used to replace the CSS style table of a tag with another one, or apply the specified style to a tag that does not apply the CSS style.

Example:

Copy codeThe Code is as follows:
<Style type = "text/css">
. Txt {
Font-size: 30px; font-weight: bold; color: red;
}
</Style>
<Div id = "tt"> welcome! </Div>
<P> <button onclick = "setClass ()"> change the style </button> </p>
<Script type = "text/javascript">
Function setClass ()
{
Document. getElementById ("tt"). className = "txt ";
}
</Script>


2. Use JS to modify the label's style attribute value:
The style attribute is also one of the methods for referencing a style sheet on a label. Its value is a CSS style sheet. DOM objects also have style attributes, but this attribute is also an object. The attributes of Style objects correspond to CSS attributes one by one. When the attributes of Style objects are changed, the CSS attribute value of the corresponding tag is changed, so this is the second method of modification.

The code for changing the CSS attribute of a tag is:

Document. getElementById (id). style. attribute name = value;
Document. getElementById (id) is used to obtain the DOM object corresponding to the tag. You can also use other methods. Style is an attribute of a DOM object. It is also an object. The attribute name is the attribute name of the Style object, which corresponds to a CSS attribute.

Note: This method modifies a single CSS attribute without affecting other CSS attribute values on the tag.

Example:

Copy codeThe Code is as follows:
Div id = "t2"> welcome! </Div>
<P> <button onclick = "setSize ()"> size </button>
<Button onclick = "setColor ()"> color </button>
<Button onclick = "setbgColor ()"> background </button>
<Button onclick = "setBd ()"> border </button>
</P>
<Script type = "text/javascript">
Function setSize ()
{
Document. getElementById ("t2"). style. fontSize = "30px ";
}
Function setColor ()
{
Document. getElementById ("t2"). style. color = "red ";
}
Function setbgColor ()
{
Document. getElementById ("t2"). style. backgroundColor = "blue ";
}
Function setBd ()
{
Document. getElementById ("t2"). style. border = "3px solid # FA8072 ";
}
</Script>