The following first record the JS control CSS used by the method.
1. Use JavaScript to change the properties of a CSS class ...
<style type= "Text/css" >
. orig {
Display:none;
}
</style>
You want to change his display property from none to inline.
Workaround: In IE:
Document.stylesheets[0].rules[0].style.display = "inline";
In Firefox:
Document.stylesheets[0].cssrules[0].style.display = "inline";
Discussion: Ability to do a function to search for a style object of a particular name:
I have a Test record for the browser compatibility of rules and Cssrules : http://blog.csdn.net/u011043843/article/details/28276757
Then just want to:
GetStyle (". Orig"). Display = "inline";
will be able to.
------------------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 the stylesheet, such as:
<style type= "Text/css" >
. s{display= "None";}
. w{display= "None";}
</style>
Change s: document.stylesheets[0].rules[0].style.display= ' inline ';
Change 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 to 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 just the background color set in the Style property in the ID. Assuming that the style attribute in the ID is not set background-color then it will return null, that is, if the ID uses the class attribute to refer to an external style sheet, set the background color in the external style sheet, then I'm sorry.
document.getElementById ("id"). Style.backgroundcolor this kind of writing is not so, 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 comes again, so write in Firefox, but in IE not good to make ,
the two compatible way written
Window.getcomputedstyle?window.getcomputedstyle (id,null). backgroundcolor:id.currentstyle["BackgroundColor"];
Suppose to get the background color, so that the method in Firefox and IE return value is not the same, IE is returned "#ffff99", and Firefox returned "RGB (238, )";
Note: window.getComputedStyle (id,null) Such a way can not set the style, only can be obtained, to be set to be written like this id.style.background= "#EE2C21";
In IE, currentstyle can only get the style in a read-only fashion.
Changes the CSS property with JavaScript;
only writes native JavaScript.
1. Change the class attribute value of the tag with JS: The
Class property is one of the methods that refer to a style sheet on a label, whose value is a selector for a style sheet, assuming that the value of the class attribute is changed. The style sheet referenced by the tag is replaced, so this is the first method of change.
The code for changing the class property of a label is:
document.getElementById (id). className = string;
document.getElementById (ID) is used to get the corresponding DOM object for the label, and you can also 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.
Use this method to replace the CSS style sheet of a tag with another one, and to have a label that does not have a CSS style applied to the specified style.
Example:
2. Use JS to change the value of the label's style property:
The Style property is also one of the methods that refer to a style sheet on a label, and its value is a CSS style sheet. DOM objects also have 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 another way to change.
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 corresponding DOM object for the label, and you can get it in other ways as well. 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 changes a single CSS property, and it does not affect other CSS property values on the label.
Example:
JavaScript manipulating HTML element CSS properties
