Native JS get element style

Summary:

In the development process, we often encounter the use of JS to get or change the style of DOM elements, there are many ways, such as: by changing the DOM element class. Now let's talk about native JS to get the CSS style of DOM element, note is to get not set

Before we get started, the first thing that gets all the CSS property objects that are finally applied to the element is that if you don't set any style for the element, the default browser style is returned.

1, Ele.style

When you learn the DOM, you see that you get the element style value through Ele.style, but sometimes you get not the style value of the node, but the null value. This is because Ele.style can only get the style values that are written in the style attribute in the element tag and cannot get to the definition in <style></style> and through <link href= "Css.css" > Load the style properties that come in

Example:

var test = document.getElementById ("test");
Gets the color of the node

Test.style.color;

2, getComputedStyle ()

getComputedStyle is a CSS property value that can get all the final use of the current element.

The syntax is as follows:

window.getComputedStyle ("element", "Pseudo-class");

This method takes two parameters: to get the element of the calculated style and a pseudo-element string (for example, ": Before"). If no pseudo-element information is required, the second argument can be null. can also be used by Document.defaultView.getComputedStyle ("element", "Pseudo-class");

Example:

var test = document.getElementById ("Test"),
Demo = window.getComputedStyle (test, NULL);

Gets the color of the node

Demo.color

Note: Firefox and Safari convert colors to RGB format, and if there are no styles on the test node, see the number of browser default styles by Style.length. Ie6-8 does not support this method, you need to use the following method

3, Ele.currentstyle

Currentstyle is an IE browser's own property, its syntax is similar to Ele.style, the difference is that Element.currentstyle returns the final CSS attribute value of the element currently applied (including the outer chain CSS file, < embedded in the page Style> properties, etc.).

Syntax:

var style = Dom.currentstyle;

Example:

var test = document.getElementById ("Test"),

demo = Test.currentstyle;

Gets the color of the node

Demo.color;

Note: for the composite attribute border, IE returns undefined, other browsers have return values, some do not return, but borderleftwidth such property is the return value of the

4, GetPropertyValue ()

GetPropertyValue get the Direct property name of a CSS style

The syntax is as follows:

window.getComputedStyle (element, null). GetPropertyValue (attribute)

Example:

var test = document.getElementById (' test ');

window.getComputedStyle (test, NULL). GetPropertyValue ("Background-color");

Note: The property name does not support hump format, IE6-8 does not support this method, you need to use the following method

5, GetAttribute

GetAttribute is similar to GetPropertyValue, with a little difference is the property name hump format

Example:

var test = document.getElementById (' test ');

window.getComputedStyle (test, NULL). GetPropertyValue ("BackgroundColor");

Note : This method only supports Ie6-8

Summary:

The jquery css () method, which uses the getComputedStyle and GetPropertyValue methods in its underlying operation, can be used to get the value of the element when we use the native JS development.

Here is a way to get the element style from a browser compatible with Ie,firefox,chrome, which can be applied to the project

1 functionGetStyle (ele) {2     varstyle =NULL;3     4     if(window.getComputedStyle) {5style = window.getComputedStyle (Ele,NULL);6}Else{7style =Ele.currentstyle;8     }9     Ten     returnstyle; One}

Native JS get element style