JS Control CSS Style sheet

JS control CSS style, first of all to determine a point, CSS and HTML page link, because there are 3 kinds of CSS with HTML page, different ways will produce different results. The following first record the JS control CSS used by the method.

1. Use JavaScript to change the properties of a CSS class ...

1 <styletype= "Text/css"> 2 . Orig{ 3 Display:None; 4 } 5 </style> 

You want to change his display property from none to inline.
Workaround: In IE:

In Firefox:

Discussion: You can do a function to search for a style object of a particular name:

1 functionGetStyle (sname) {2  for(vari=0;i<document.stylesheets.length;i++) { 3 varrules;4 if(document.stylesheets[i].cssrules) {5Rules =Document.stylesheets[i].cssrules;6}Else { 7Rules =Document.stylesheets[i].rules;8 } 9  for(varj=0;j<rules.length;j++) { Ten if(Rules[j].selectortext = =sname) {  One //The purpose of the Selectortext property is to replace a selected address. The meaning should be to get the classname of rules[j]. There's something wrong, please. A returnRules[j].style; - }  - }  the }  -}

Then just:

------------------Note Document.stylesheets[0].rules[0].style This stylesheets[0] array subscript is the nth CSS style sheet representing this page, its subordinate rules[0] The array subscript represents the nth style in this style sheet, for example:

Modify S: document.stylesheets[0].rules[0].style.display= ' inline ';
Modify W: document.stylesheets[0].rules[1].style.display = ' inline ';
Note: CSS and HTML must be combined in a way that is <link rel= "stylesheet" type= "Text/css" href= ""/> or <style></style> when the above method is feasible, If @import is not.
====================================
The following is a record of JS access CSS style:
Get and set style with JavaScript
The DOM Standard introduces the concept of overriding style sheets when we use document.getElementById ("id"). Style.backgroundcolor gets the style when it gets the background color that is set in the Style property in the ID. If the style attribute in the ID is not set background-color then it will return null, that is, if the ID references an external style sheet with the class attribute, the background color set in the external style sheet, So embarrassed document.getElementById ("id"). Style.backgroundcolor this does not work, if you want to get the settings in the external style sheet, you need to use the Window object's getComputedStyle ( ) method, the code writes window.getComputedStyle (id,null). backgroundcolor
But the compatibility problem came again, so write in Firefox, but in IE not good to make
Two compatible ways to write

Window.getcomputedstyle?window.getcomputedstyle (ID,null

If it is to get the background color, this method in Firefox and IE return value is not the same, IE is returned "#ffff99", and Firefox returned "RGB (238, 44, 34)"
Notable is: window.getComputedStyle (id,null) This way can not set style, can only get, to set up also have to write similar id.style.background= "#EE2C21";
Currentstyle in IE can only get styles in read-only mode.

This article only for the study, extracts the network search data to combine, does not have any copyright, may arbitrarily reprint, if the original author has the different idea, may at any time contact me.

Modifying CSS properties with JavaScript

Only native JavaScript is written.

1. Modify the tag's class attribute value with JS:

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

The code to change the class property of a label is:

document.getElementById (id). ClassName = string;
document.getElementById (ID) is used to get the DOM object for the tag, and you can get it in other ways. ClassName is a property of a DOM object that corresponds to the class property of the tag. The string is the new value of the Class property, which should be a defined CSS selector.

Using this method, you can replace the CSS style sheet of the tag with another one, or you can have a tag with no CSS style applied to the specified style.

Example:

 <style type= "text/css" >. txt {font -size:30px; Font-weight:bold; color:red; }  </style> <div id= "tt" > Welcome! </div> <p><button onclick= "SetClass ()" > Change style </button></p> <script type= "text/ JavaScript "> function   SetClass () { document.getElementById ( "tt"). ClassName = "txt" ;}  </script> 

2. Modify the label's style property value with JS:
The Style property is also one of the ways to refer to a style sheet on a label, and its value is a CSS style sheet. The DOM object also has a style property, but the property itself is an object, the Style object's properties and CSS properties are one by one corresponding, when the property of the style object is changed, the corresponding tag CSS property values are changed, so this is the second method of modification.

The code to change the CSS properties of a tag is:

document.getElementById (ID). style. property name = value;
document.getElementById (ID) is used to get the DOM object for the tag, and you can get it in other ways. A style is a property of a DOM object, which is itself an object. The property name is the property name of the Style object, and it corresponds to a CSS property.

Description: This method modifies a single CSS property, which does not affect other CSS property values on the label.

Example:

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" >functionsetSize () {document.getElementById ("T2"). Style.fontsize = "30px"; } functionSetColor () {document.getElementById ("T2"). Style.color = "Red"; } functionSetbgcolor () {document.getElementById ("T2"). Style.backgroundcolor = "Blue"; } functionsetbd () {document.getElementById ("T2"). Style.border = "3px solid #FA8072"; } </script>

JS Control CSS Style sheet