Native JavaScript get element style _javascript tips

Summary:
We often encounter in the development process to get or change the DOM elements through JS style, there are many methods, such as: by changing the DOM element class. Now we're going to talk about native JS to get the CSS style for DOM elements, and note that fetching is not set

Before we get started. Getting all CSS property objects that are ultimately applied to an element means that the default style of the browser is returned if no style is set for the element.

1, Ele.style
When you learn the DOM, you see the element style value through Ele.style, but sometimes you get a null value instead of the node's style value. This is because Ele.style can only get the style values written in the style attribute in the element label and cannot get to the definition in <style></style> and through <link href= "Css.css" > Load in style properties

Example:

Copy Code code as follows:

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 uses of the current element.

The syntax is as follows:

window.getComputedStyle ("element", "pseudo class");

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

Example:

Copy Code code as follows:

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, view 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 a property of IE browser, its syntax is similar to Ele.style, the difference is that Element.currentstyle returns the final CSS attribute value of the element's current application (including the external chain CSS file, the embedded < in the page). Style> properties, etc.).

Grammar:

var style = Dom.currentstyle;

Example:

Copy Code code as follows:

var test = document.getElementById ("Test"),
demo = Test.currentstyle;
Gets the color of the node
Demo.color;

Note: For integrated properties border, ie returns undefined, other browsers have return values, some do not return, but borderleftwidth such attributes are returned values

4, GetPropertyValue ()
GetPropertyValue get the Direct property name of a CSS style

The syntax is as follows:

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

Example:

Copy Code code as follows:

var test = document.getElementById (' test ');
window.getComputedStyle (test, NULL). GetPropertyValue ("Background-color");

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

5, GetAttribute
GetAttribute is similar to GetPropertyValue, one of the differences is the attribute name hump format

Example:

Copy Code code as follows:

var test = document.getElementById (' test ');
window.getComputedStyle (test, NULL). GetPropertyValue ("BackgroundColor");

Note: This method only supports Ie6-8

Summary:
jquery's CSS () method, its low-level operation has applied the getComputedStyle and the GetPropertyValue method, when we use the native JS development, can obtain the element's value by the above method.

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

Copy Code code as follows:

function GetStyle (ele) {
var style = null;

if (window.getComputedStyle) {
style = window.getComputedStyle (ele, NULL);
}else{
style = Ele.currentstyle;
}

return style;
}