DOM operation table, dom table

DOM operation table, dom table

CSS Classification

Intra-row:

<div id="box"  style="width:200px;border:1px solid red  color:red;font-size:16px;"></div>

Inline: the HTML header is generally in the following format:

<styletype=”text/css”>         div.test{                         background-color:red;                         height:10px;                     width:10px; margin:10px;               }</style>

Link: introduce a separate CSS file in HTML. The format is as follows:

<linkrel="stylesheet" type="text/css"href="xx.css"/>

First, let's take a look at JS operations on CSS.

JS can be used to obtain and set intra-row styles.

Each element in HTML has an attribute object style, which contains all the css styles of the element. This CSS style is called an embedded style, as shown below:

<Div id = "box" style = "width: 200px; border: 1px solid red color: red; font-size: 16px;"> </div> var box = document. getElementById ('box'); // obtain the Element Node alert (box. style); // CSSStyleDeclaration object alert (box. style. color); // red alert (box. style. width );

Note: In CSS, if the font-size attribute is displayed, remove the-number in JS, and write the subsequent characters in uppercase as alert (box. style. fontSize );

The JS style can be used to obtain all set attribute values. You can also set the attribute value.

Box. style. color = green; // change the color to green box. style. height = 12px; // You can also set attributes that do not exist.

DOM2 also defines some attributes and methods for styles.

RemoveProperty (name) -- remove the specified property setProperty (name, value, position) -- set the value for the specified property

However, only the css style in the row can be obtained through the style. If inline or link is used, it cannot be obtained. In non-IE, getComputedStyle () can be used to use the currentStyle () attribute in IE, the two methods can only be obtained.

JS gets and sets inline and link styles

The operations on these two styles are performed through the CSSStyleSheet object. There are two ways to obtain the objects.

Method 1: first obtain the element and then obtain the object

In IE, it is obtained through the sheet attribute, and in non-IE, it is obtained through styleSheet.

Var link = document. getElementsByTagName ('link') [0]; // obtain the css styles of all links through the tag surface and then go to the first var sheet = link. sheet | link. styleSheet; // obtain the CSSStyleSheet object through sheet or styleSheet

Method 2

It is directly obtained through styleSheets in doucument and returns a value, which is compatible with all browsers.

Var sheet = document. styleSheets [0];

CSSStyleSheet has some attributes and methods that can be used to operate external styles. Commonly Used "add" and "delete" are not compatible with IE and non-IE, so you need to write functions for compatibility. If you want to "change" the style in CSS, you can use CSSRules to modify a rule in the CSS file.

Summary

CSS has three styles in total. DOM operations can be divided into two categories. styles can be read and written in the row, while getComputedStyle or currentStyle can only be used for linking, if you use the CSSRules object under the CSSStyleSheet object, you can read and write the specified CSS rule.