JavaScript script to manipulate CSS

Scripted CSS is the use of JavaScript scripts to operate CSS. With HTML5, Ajax, jQuery and other technologies, you can design delicate and realistic page special effects and interactive behaviors to improve user experience, such as display/hide, positioning, deformation, movement, etc. of web page objects. Dynamic styles.

1. Basics of CSS scripting

CSS styles come in two forms: style attributes and style sheets. The DOM Level 2 specification provides a set of APIs, including CSS style sheet access interfaces. Prior to the DOM Level 2 specification, it was allowed to access inline style properties using the style attribute of the tag object.

1.1. Access inline styles

Any HTML tag that supports the style attribute has a corresponding style script attribute in JavaScript. Style is a readable and writable object that contains a set of CSS styles.

Use the cssText property of style to return a string representation of the inline style. At the same time, the style object also contains a set of script attributes that map one-to-one to CSS style attributes. The names of these script properties correspond to the names of CSS style properties. In JavaScript, since the hyphen is the minus sign operator, the script properties of style attributes containing hyphens (such as font-family) will be renamed in camelCase (such as fontFamily).

[Example] The border-right-color attribute should use borderRightColor in scripts:

 <div id="box" >box</div>
    <script>
    var box = document.getElementById("box");
    box.style.borderRightColor = "red";
    box.style.borderRightStyle = "solid";
    </script>

Tip: When using CSS script properties, you need to pay attention to several issues:

  • Float is a reserved word in JavaScript, so cssFloat is used to represent the name of the corresponding script attribute.
  • In JavaScript, all CSS property values are strings and must be quoted. elementNode.style.fontFamily = "Arial, Helvetica, sans-serif"; elementNode.style.cssFloat = "left"; elementNode.style.color = "#ff0000";
  • A semicolon at the end of a CSS style declaration cannot be used as part of a script property value.
  • The attribute value and unit must be passed to the CSS script property completely. If the unit is omitted, the script style set will be invalid.

1.2. Using style object

The DOM level 2 style specification defines some attributes for the style object, which are briefly described as follows:

  • cssText: Returns the CSS style string of style.
  • length: Returns the number of declared CSS styles of style.
  • parentRule: Returns the CSSRule object to which the style belongs.
  • getPropertyCSSValue(): Returns a CSSValue object containing the specified property.
  • getPropertyPriority(): Returns whether the specified property is appended with the !important command.
  • item(): Returns the name of the CSS property at the specified subscript position.
  • getPropertyValue(): Returns the string value of the specified property.
  • removeProperty(): Removes the given property from the style.
  • setProperty(): Set the value for the specified property, and you can also attach a priority flag.

1.3. Using styleSheets object

In the DOM level 2 style specification, the styleSheets object can be used to access all style sheets in the page, including internal style sheets defined with the