Javascript controls CSS styles. First, you must determine the link between CSS and HTML pages. Because CSS can be combined with HTML pages, different methods may produce different results. next, record the method used by JS to control CSS.
1. Use javascript to change the attributes of a css class...
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 Var rules;
If (document.stylesheetspolici}.css Rules ){
Rules = document.stylesheetspolici2.16.css Rules;
} Else {
Rules = document. styleSheets [I]. rules;
}
For (var j = 0; 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:
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 Or The above method is feasible, such as @ IMPORT.
==========================================
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:
The Code is as follows:
Welcome!
Change style
