Full stack JavaScript road (25) to access the style of the element

Regardless of the element that supports the style attribute, there is a style property in its Dom node object corresponding to it. This style object is an instance of the Cssstyledeclaration type, including all style information for the HTML style attribute. It does not include styles that are stacked with external styles or inline styles.

In the style attribute. Whatever CSS property is set, it will behave as a property of this style object. For attribute names that use dashes. Must be converted to hump and lowercase, which can be converted in most cases.

There are exceptions, float is javascript keyword, cannot be converted directly, converted to stylefloat in IE, and converted to cssfloat in other browsers.

Assuming that the element is not set to a style, which style has some default properties.

1. Dom2 The Style object defines some properties and methods

1. Csstext: Through which you can access the code in the style attribute
2. Length: The number of CSS properties applied to an element
3. Parentrule: Cssrule object that represents the CSS information
4. GetPropertyValue (PropertyName): Returns the value of the specified property.
5. Getpropertycssvalue (PropertyName): Returns a Cssvalue object that includes a value for the point attribute. ({cssvaluetype: ", Csstext:"})
6. Getpropertypriority (PropertyName): If!mportant is used for the origin of the point, the return importtant assumes no, then an empty string is returned.
7. Item (index), returns the name of the CSS property at the specified location
8. Removeproperty (PropertyName); Remove from style to point property
9. SetProperty (propentyname,value,priority), sets the given property to the specified value, plus precedence (empty string or!important)

2. Calculation style: "DOM2 level Style" enhanced Document.defaultview. Provides the getComputedStyle () method.

This method accepts two parameters: to get the element of the calculated style and a pseudo-element string (for example, ": after").

Assuming that no pseudo-element information is required, the second parameter can be null. The getComputedStyle () method returns a Cssstyledeclaration object (the same as the type of the Style property). This includes all computed styles for the current element.

(There is no getComputedStyle () method in IE, but in IE, each element with a style attribute has a Currentstyle attribute, which is an instance of the Cssstyledeclaration type)

The border property may or may not return the actual border rule in the style sheet (Opera will return but not other browsers).

The reason for this area is that different browsers interpret synthetic (rollup) attributes, such as border, in different ways,

Because setting such a property actually involves very many other properties.

When setting the border. The border width, color, style properties (Border-left-width, Border-top-color, Border-bottom-style) are actually set for four edges. And so on).

Therefore, even though Computedstyle.border does not return a value in all browsers, Computedstyle.borderleftwidth returns a value.

Full stack JavaScript road (25) to access the style of the element