Example of JavaScript manipulation stylesheet style

code is as follows	copy code
0: Cssstylesheet cssrules:cssrulelist 0:cssstylerule length:1 __proto__: cssrulelist Disabled:false Href:null media:medialist Ownernode:style ownerrule:null Parentstylesheet:null Rules:cssrul Elist Title:null Type: "Text/css" __proto__: Cssstylesheet

This is the CSSRULE DOM structure
Disabled: A Boolean value that indicates whether the style sheet is disabled. This property is readable/writable, and setting this value to true disables the style sheet.
href: The URL of the style sheet if the style sheet is contained by <link>, otherwise, null.
Media: A collection of all media types that are supported by the current style sheet. As with all DOM collections, this collection also has a length property and an item () method. You can also use the square brackets syntax to get a specific item in a binding. If the collection is an empty list item, it means that the style sheet is applicable to all media. In IE, media is a string that reflects the media characteristics of the <link> and <style> elements.
Ownernode: A pointer to the node that owns the current style sheet, which may have been introduced in HTML through <link> or <style>. This property value is null if the current style sheet is imported by @import from another style sheet. IE does not support this attribute.
Parentstylesheet: This property is a pointer to the style sheet that imports it when the current style sheet is imported by @import. The value of the title property in the
Title:ownernode.
Type: A string representing the style sheet type. For CSS stylesheets, this string is "Type/css". The
other properties are read-only except for the disabled property. On the basis of supporting all of these properties, the Cssstylesheet type also supports the following properties and methods:

code is as follows

copy code

if (document.stylesheets[0].cssrules) {   & nbsp;    //div {background:red;}         Alert (document.stylesheets[0].cssrules[1].selectortext + ":" + Document.stylesheets[0].cssrules[1].style.csstext + "Cssrules");    } else {        //header {width:100%; height:100px}         Alert (document.stylesheets[0].rules[1].selectortext + ":" + Document.stylesheets[0].rules[1].style.csstext + "rules");    }

1. IE9 and above, Chrome,firefox document.stylesheets[0].cssrules[1].selectortext//result is div
2. IE9 below Document.stylesheets[0].rules[1].selectortext//The result is header difference as follows
1.cssRules, and rules of the difference
2. The counting method is not the same, in the first case cssrules elements in accordance with a number of CSS rules count ' #content, header {width:100%; height:100px;} ' No. 0, ' div {background:red;} ' 1th and in the second case the selector counts, the rules of multiple selector are split into several #content {width:100%; height:100px;} No. 0, header {width:100%; heigh t:100px; The first article, div {background:red;} ' 2nd

Insertrule () and addrule () Create rules
To add a new rule to an existing style sheet, you need to use the Insertrule () method. This method takes two parameters: the rule text and the index where the rule is inserted. Here is an example:
Sheet.insertrule ("Body {background-color:silver}", 0); Firefox, Safari, opera, and chrome all support the Insertrule () method.
IE supports a similar method called Addrule, which also accepts two required parameters: Selector text and CSS style information; an optional parameter: The position where the rule is inserted. Insert the same rules as the previous example in IE, using the following code:
Sheet.addrule ("Body", "Background-color:silver", 0); Effective for IE
To insert a rule into a style sheet in a cross-browser fashion, you can use the following function. This function takes 4 parameters: the style sheet to which you want to add a rule and the same 3 parameters as Addrule (), as follows:

code is as follows	copy code
function Insertrule (sheet, selectortext, csstext, position) {     if (sheet.insertrule) {   & nbsp;     Sheet.insertrule (Selectortext + "{" + Csstext + "}", position);    } else if (sheet.addrule) {         sheet.addrule ( Selectortext, Csstext, poistion);    } } Insertrule (document.stylesheets[0], "body", "Background-color:silver", 0;

The

DeleteRule () and removerule () deletion rule
Removes a rule from a style sheet by DeleteRule (), which takes a parameter: the location of the rule to be deleted. For example, to delete the first rule in a style sheet, you can use the following code:
Sheet.deleterule (0); //dom method
IE supports similar methods called Removerule (), using the same method, as follows:
Sheet.removerule (0); //For IE valid
The following is a function that can delete a rule across browsers. The first parameter is the style sheet to manipulate, and the second parameter is the rule index to delete:

The code is as follows	Copy Code
function DeleteRule (sheet, index) { if (sheet.deleterule) { Sheet.deleterule (index); else if (sheet.removerule) { Sheet.removerule (index); } } DeleteRule (Document.stylesheet[0], 0);

The latest version of IE and chrome four methods are supported. Specific everyone in the browser inside Console.dir (Document.stylesheets[0]); look at that.