A brief analysis of 2015-03-12--DOM2-style

The Cssstylesheet object represents a style sheet of some kind
Cssstylerule each rule in the object style sheet

Get all style sheets in a document
Document.stylesheets

Cssstylesheet Object
Property
Type Text/css
Disabled indicates whether the style sheet applies to the current document. Apply/disable, false/true
The href style sheet is relative to the URL where the current document resides
Title can be used to group the label of the style sheet
Media indicates the target device type, screen or print lower level attribute, Mediatext IE No
Ownerrule A read-only Cssrule object that represents its parent rule
Cssrules A read-only Cssrulelist list object that contains all Cssrule objects in the style sheet in IE as rules
Method
Insertrule (rule, index); IE AddRule (selector, Declaration, index);
DeleteRule (index);
There is no specific method for editing, and can only be changed directly by modifying the style property of Rules[i]. Inheritance can be achieved compared to modifying the style property of element directly.

Cssstylerule Object
The type inherits from a property of the Cssrule object, and 0-6 represents its rule type. For a rule of type Cssstylerule, the property value is always 1.
Csstext represents all rules in the current state. If JS is modified, the string will change accordingly.
Parentstylesheet references the parent Cssstylesheet object.
Parentrule such as @media
Selectortext The selector of a rule
Style is similar to Htmlelement.style and is an instance of an Cssstyledeclaration object.

Cssstyledeclaration Object
Csstext all rules in string form.
Parentrule referencing Cssstylerule objects
GetPropertyValue (Porpertyname);
Removeproperty (PropertyName);
SetProperty (propertyname, value, priority); IE is not supported and can only be accessed directly through the style, in a quick manner.
There is also a quick way to access Cssstyledeclaration object instances (such as the Style property of HtmlElement) through Css2properties.

Style Property
By using the Style property, you can only access CSS properties that are declared in an embedded manner in the element's style property. The Style property cannot access any CSS properties that are stacked from a multiple-style overlay or inherited from a parent element.

Toggle style based on classname
ClassName refers to the class property of the HtmlElement object.
Why not set the Class property setattribute?
Element.setattribute (' class ', ' name ');
IE element.setattribute (' className ', ' name ');

Toggle Style Sheet
1. You can use the Rel attribute of the <link> element to define an alternate style sheet
2. Apply a class name to the body tag
3. Add or Remove style sheets

Properties of the <link> element
Type
Href
Media
Rel "stylesheet" immediately applies "alternate stylesheet" standby
Disabled is disabled and can be used to control whether the style sheet is enabled or not
Title of the title style sheet, which can be used to combine multiple style sheets.

The node that the style sheet belongs to
Stylesheet.ownernode
IE stylesheet.owningelement

Modify CSS Rules
Can only be changed directly by modifying the style property of Rules[i], there is no dedicated method. Inheritance can be achieved compared to modifying the style property of element directly.

Add CSS Rules
DOM2
Index = length is the end of the list
Stylesheets[i].insertrule (rule, index);
Ie
index =-1 is the end of the list
Stylesheets[i].addrule (selector, Declaration, index);

Pseudo-class can be used in the DOM2 specification
A[href]:after {
Content: ' (' attr (HREF) ') ';
font-size:40%;
}

Accessing calculated Styles
In the DOM2 style specification, a method called getComputedStyle () is included in the Document.defaultview to return a read-only Cssstyledeclaration object. It contains all of the calculated styles.
Document.defaultView.getComputedStyle (element, NULL); Second parameter, Pseudo class
Use Element.currentstyle[propertyname in IE]

A brief analysis of 2015-03-12--DOM2-style