JavaScript Document Object Model-DOM2 Style

There are three methods to define styles in HTML: Use the & lt; link & gt; label to reference an external style table file, and use & lt; style & gt; element to define embedded styles and use the style feature to set styles for specific elements. The "DOM2-level style" module is a set of Apis around these three application style mechanisms. To determine whether the browser supports DOM2-level CSS capabilities, you can use the following code: There are three methods to define styles in HTML: Label to reference an external style table file.

In the preceding HTML code, the CSS style applied to the p # myDiv element comes from the embedded style table and the style of the element. However, the background-color and border attributes are set in the style feature, and the width and height attributes are not set. The following code obtains the CSS style calculated by this element:

var p = document.getElementById("myDiv");var computedStyle = document.defaultView.getComputedStyle(p,null);console.info(computedStyle.backgroundColor);console.info(computedStyle.width);console.info(computedStyle.height);console.info(computedStyle.border);

When setting the border attribute, the width, color, and style attributes of the four borders are actually set: border-left-width, border-top-color, and border-right-style. border returns different values. Execute computedStyle In the Firefox browser. the returned value of border is an empty string. Therefore, when using the getComputedStyle () method, you 'd better test it in multiple browsers.

IE does not support the getComputedStyle () method, but it has a similar concept. In IE, each element with the style attribute also has a currentStyle attribute. This attribute is an instance of CSSStyleDelaration. It contains all the calculated styles of the current element. The method for getting these styles is similar to the previous one:

var p = document.getElementById("myDiv");var computedStyle = document.currentStyle;console.info(computedStyle.backgroundColor);console.info(computedStyle.width);console.info(computedStyle.height);console.info(computedStyle.border);

Similar to the DOM version, IE does not return the border style because it is a comprehensive attribute.

In any browser, all calculation styles are read-only and the CSS attributes in the calculated style objects cannot be modified. In addition, the calculated style also includes the style information of the browser's internal style sheet. For example, the visibility attribute of all browsers has a default value, but this value varies depending on the browser. By default, Some browsers set the value of the visibility attribute to visible, while some browsers set it to inherit. Therefore, if you want an element to have a specific value, you need to set it manually.

The above is the content of the DOM2-level style in the JavaScript Document Object Model. For more information, see the PHP Chinese website (www.php1.cn )!