Use Dom to manipulate a style sheet

Each element object in XHTML has an attribute object style, which contains all CSS styles of elements. For each CSS style, the style object has the corresponding attributes, but the format is different: the CSS style of a single word, the style object corresponds to the style with the same attribute name (the color in CSS corresponds to the style. color); for the style of two words, the style object removes the connection line between the two words, and the attribute names of the first letter of the second word correspond to (background_color style in CSS corresponds to style. backgroundcolor ).

 

The following table lists common CSS styles and style attributes:

 

 

CSS style Object Attributes

 

Background_color style. backgoundcolor

Color Style. Color

Font Style. Font

Font-family style. fontfamily

Font-weight style. fontweight

 

 

If the attribute name has more than two words, you must use the hump name.

 

For example, change the CSS border attribute of ID = "div1" to "1px solid red" and the background color to Green:

VaR odiv = Document. getelementbyidx_xx_x ("div1 ");

Odiv. style. Border = "1px solid red ";

Odiv. style. backgroundcolor = green;

 

Dom provides several methods for style:

1. getpropertyvalue (propertyname) -- returns the string value of the attribute value of the CSS attribute.

2. getpropertypriority () -- if the CSS property rule specifies "! Import ", returns the string "! Import "; otherwise, an empty string is returned.

3. Item (INDEX) -- return the CSS attribute name of the specified index.

4. removeproperty (propertyname) -- delete the propertyname from the CSS definition.

5. setproperty (propertyname, value, priority) -- set the CSS property propertyname to value and the given priority.

 

Operate styles in external style sheets and style elements

 

Dom specifies a style table object, which has the following attributes:

1. Disabled -- indicates whether the style sheet is disabled;

2. href -- URL of the external style sheet;

3. Media -- List of media types that can use style sheets specified in the media attribute;

4. ownernode -- specify the DOM node (or element) of the style sheet );

5. parentstylesheet -- if the style sheet is included in the [email protected] statement, this attribute points to the style found in the statement;

6. Title -- the style list specified by the title attribute of HTML;

7. Type -- MIME type of the style sheet.

Use the cssrules set to access the DOM Browser style sheet rules, and use the rules set to access the IE style rules.

If you determine which set name to use:

VaR OCSS = document.stylesheets%0%.css rules | document. stylesheets [0]. Rules;

 

Final style sheet:

The style displayed on the screen is eventually the final style. The final display style is composed of inline styles and CSS rules. IE and Dom have different processing methods.
IE:
Provide the currentstyle object on each element;
You can use currentstyle to get the internal style and external style rule attributes;
Currentstyle is a read-only attribute;
Alert (div1.currentstyle. backgroundcolor );

DOM:
Document. defaultview. getcomputedstyle (DIV, null). backgroundcolor;

 

IE directly obtains the current style through the currentstyle attribute of the element, and Dom needs to call document. the getcomputedstyle method of defaultview is used to obtain the Element Object of the current style. The first parameter is a pseudo element, such as hover or first-letter, if this parameter is not required, the second parameter is null.

After obtaining the current style object, you can directly obtain the values of all attributes of the style. It is worth noting that the attribute value of the current style is read-only, that is, it can only be obtained and cannot be modified.

Use Dom to manipulate a style sheet