Home > Article > Web Front-end > javascript dynamically modify styles and cascading style sheet code_javascript skills
W3C DOM2 Style Rules
================================================ ===============
CSSStyleSheet object
The CSSStyleSheet object represents all CSS style sheets, including external style sheets and those using tag.
CSSStyleSheet is also built on other DOM2 CSS objects, and the CSSStyleRule object represents each rule in the style sheet.
A list of CSSStyleSheet objects in the document can be obtained through the document.stylesheets property. Each object has the following attributes
type ulousdieure_/ > href should should be needed Parent rule
cssRules Read-only cssRuleList list object, containing all CSSRule objects in the style sheet
============================== ==============================
insertRule(rule,index) Add a new style declaration
deleteRule(index ) Removing rules from the style sheet
CSSStyleRule object
Each CSSStyleSheet object contains a set of CSSStyleRule objects. These objects respectively correspond to a rule similar to the following:
boyd{
font:lucida,verdana,sans-serif; background:#c7600f; color:#1a3800;
}
CSSStyleRule object has the following properties:
Type All rules of
parentStyleSheet refer to the parent CSSStyleRule object
parentRule If the rule is in another rule, this property refers to another CSSRule object selectorText Contains the selector of the rule
style Similar to HTMLElement.style, it is An instance of CSSStyleDeclaration object
CSSStyleDeclaration object
Represents the style attribute of an element. Similar to CSSStyleRule object, CSSStyleDeclaration has the following properties:
cssText All rules expressed in string form
parentRule will refer to the CSSStyleRule object
========================================= ================= getPropertyValue(propertyName) CSS style property value removeProperty(propertyName) Remove the property from the declaration
setProperty(propertyName,value, priority) Set CSS attribute values
Put styles outside the DOM script
======================== =================================
style attribute
The style attribute itself is a property that represents a specific element. The CSSStyleDeclaration objects of all different CSS styles can only access the CSS properties declared inline in the style attribute of the element through the style attribute. In other words, CSS properties that are cascaded from multiple style sheets or inherited from parent elements cannot be accessed through the style attribute.
Copy code