JavaScript get elements CSS style code examples _ Basics

There are 4 ways to use CSS to control pages, namely inline styles (inline styles), inline, linked, and imported.

Inline styles (inline styles) are written in the style attribute in the HTML tag, such as <div style= "width:100px;height:100px;" ></div>

Inline styles are written in style labels, such as <style type= "Text/css" >div{width:100px; height:100px}</style>

Linking is the introduction of CSS files with the link tag, such as <link href= "Test.css" type= "Text/css" rel= "stylesheet"/>

Imports introduce CSS files with import, such as @import URLs ("Test.css")


If you want to use JavaScript to get the style information for an element, the first thought should be the style attribute of the element. However, the style property of an element represents only the inline style of an element, and if part of the style information of an element is written in an inline style and partly in an external CSS file, the full style information of the element cannot be obtained through the style property. Therefore, you need to use the calculation style of the element to get the style information for the element.

Use the getComputedStyle method of the Window object to get the calculation style for an element, which has 2 parameters, the first parameter is the element to get the calculated style, and the second argument can be null, an empty string, a pseudo class (such as: Before,:after), Both of these parameters are required.

Here's 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 color properties obtained are returned in RGB (#,#,#) format.

This time if you use Testdiv.style to get the style information, such as TestDiv.style.width is definitely empty.

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

So, here's a generic

Copy Code code 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)

Finally, note that the element's calculation style is read-only, and if you want to set the element style, you also have to use the element's style attribute, which is the true purpose of the element style attribute.