Javascript code example for getting element CSS styles

You can use css to control pages in four ways: Intra-row style (Inline style), inline style, link style, and pilot type.

Inline style is written in the style attribute of the html Tag, such as <div style = "width: 100px; height: 100px;"> </div>

Embedded styles are written in style labels. For example, <style type = "text/css"> div {width: 100px; height: 100px} </style>

A link is used to introduce css files with link labels. For example, <link href = "test.css" type = "text/css" rel = "stylesheet"/>

Import the css file with import, for example, @ import url ("test.css ")


If you want to use javascript to obtain the style information of an element, you should first consider the style attribute of the element. However, the style attribute of an element only represents the inline style of an element. If part of the style information of an element is written in an inline style, part of the style information is written in an external css file, you cannot obtain the complete style information of an element through the style attribute. Therefore, you must use the calculated style of the element to obtain the style information of the element.

Use the getComputedStyle method of the window object to obtain the calculation style of an element. This method has two parameters. The first parameter is the element for obtaining the calculation style, the second parameter can be null, a null string, or a pseudo-class (for example, before,: after). Both parameters are required.

Here is an example.

<Style type = "text/css">

# TestDiv {

Border: 1px solid red;

Width: 100px;

Height: 100px;

Color: red;

}

</Style>

<Div id = "testDiv"> </div>

Var testDiv = document. getElementById ("testDiv ");

Var computedStyle = window. getComputedStyle (testDiv ,"");

Var width = computedStyle. width; // 100px

Var height = computedStyle. height; // 100px

Var color = computedStyle. color; // rgb (255, 0, 0)
[/Code]

Note: The obtained color attributes are returned in rgb (#, #, #) format.

In this case, if testDiv. style is used to obtain the style information, for example, testDiv. style. width must be empty.

 

The getComputedStyle method is not implemented in IE8 or earlier versions, but each element in IE has its own currentStyle attribute.

So, to a general

Copy codeThe Code is as follows:
Var testDiv = document. getElementById ("testDiv ");

Var styleInfo = window. getComputedStyle? Window. getComputedStyle (testDiv, ""): testDiv. currentStyle;

Var width = styleInfo. width; // 100px;

Var height = styleInfo. height; // 100px;

Var color = styleInfo. color; // rgb (255, 0, 0)

 

Note that the calculation style of the element is read-only. To set the element style, you must use the style attribute of the element (this is the real purpose of the element style attribute ).