Javascript dynamically modifies the style and cascade style table code. For more information, see. W3C DOM2 style rules
========================================================== ============================
CSSStyleSheet object
The CSSStyleSheet object represents all CSS style sheets, including external style sheets and usage The embedded style sheet specified by the label.
CSSStyleSheet is also built on the basis of other DOM2 CSS objects, while CSSStyleRule objects represent each rule in the style sheet.
You can use the document. stylesheets attribute to obtain a list of CSSStyleSheet objects in the document. Each object has the following attributes:
Type is always text/css
Whether the corresponding style sheet of disabled should be in or disabled in the current document
URL of the href style sheet relative to the current document
Title grouping style labels
Target device type (screen, print) of the media style Application)
OwnerRule: a read-only CSSRule object. If the style is imported with @ import, it indicates its parent rule.
CssRules read-only cssRuleList list object, including all CSSRule objects in the style sheet
========================================================== ============================
InsertRule (rule, index) adds a new style Declaration
DeleteRule (index) removes rules from the style sheet
CSSStyleRule object
Each CSSStyleSheet object contains a set of CSSStyleRule objects. These objects correspond to rules similar to the following:
Boyd {
Font: lucida, verdana, sans-serif;
Background: # c7600f;
Color: #1a3800;
}
The CSSStyleRule object has the following attributes:
Type inherits from an attribute of a CSSRule object, with 0 ~ A number in column 6 indicates the rule type.
CssText all rules in the current state in string format
ParentStyleSheet references the parent CSSStyleRule object
ParentRule if the rule is located in another rule, this attribute references another CSSRule object
SelectorText contains the rule selector.
Similar to HTMLElement. style, style is an instance of the CSSStyleDeclaration object.
CSSStyleDeclaration object
The style attribute of an element. Similar to the CSSStyleRule object, CSSStyleDeclaration has the following attributes:
All cssText rules in string format
ParentRule references the CSSStyleRule object.
========================================================== ============================
GetPropertyValue (propertyName) CSS style Attribute Value
RemoveProperty (propertyName) removes attributes from the Declaration
SetProperty (propertyName, value, priority) sets the CSS Attribute value
Place style outside DOM script
========================================================== ========================
Style attributes
The style attribute itself is a CSSStyleDeclaration object that represents all different CSS styles of a specific element. The style attribute can only be used to access the CSS attributes declared as embedded in the style attribute of an element. In other words, the style attribute cannot be used to access CSS attributes that are stacked by multiple style tables or inherited from the parent element.
The Code is as follows:
Element. style. backgroundColor = 'red'; // The background-color is converted to the case-sensitive format. Required
// Set the style of the element whose id is "example"
SetStyleById ('example ',{
'Background-color': 'red ',
'Border': '1px solid Black ',
'Padding': '1px ',
'Margin ': '1px'
});
Function setStyle (elementid, styles ){
Var element = document. getElementById (elementid );
// Cyclically traverse the styles object and apply each attribute
For (property in styles ){
// Attributes not directly defined by styles
If (! Styles. hasOwnProperty (property) continue;
If (element. style. setProperty ){
Element. style. setProperty (uncamlize (property, '-'), styles [property], null );
} Else {
Element. style [camelize (property)] = styles [property];
}
}
Return true;
}
// Convert word-word to wordWord
Function camelize (s ){
Return s. replace (/-(\ w)/g, function (math, p1 ){
Return p1.toUpperCase ();
});
}
// Convert wordWord to word-word
Function uncamelize (s, sep ){
Sep = sep | '-';
Return s. replace (/([a-z]) ([A-Z])/g, function (match, p1, p2 ){
Return p1 + sep + p2.toLowerCase ();
});
}
// Switch the style based on className
Element. className + = 'newclass ';
Access computing style
Before modifying the performance of an element, you may want to determine its current style attribute. Because the style attribute of an element is only applicable to styles defined in Embedded mode, therefore, the calculation style cannot be obtained through the style. The DOM2 specification is in document. defaultView contains a method named getComputedStyle (). This method returns a read-only CSSStyleDeclaration object containing all the computing styles of specific elements, as shown below:
The Code is as follows:
Var styles = document. defaultView. getComputedStyle (element );
Var color = styles. getProperty ('background-color ');
However, Microsoft has its own attribute element. currentStyle version.
The Code is as follows:
// Obtain the computing style of one element
Function getStyle (element, property ){
Var value = element. style [camelize (property)];
If (! Value ){
If (document. defaultView & document. defaultView. getComputedStyle ){
Value = document. defaultView. getComputedStyle (element). getPropertyValue (property );
} Else if (element. currentStyle ){
Value = element. currentStyle [camelize (property)];
}
}
Return value;
}
