Easy way to get element styles in native js

During the development process, we often encounter the style of DOM elements through js. There are many methods, such as: by changing the class of DOM elements. Now we discuss native js to get the CSS style of DOM elements, note that it is not a setting

Before starting, let’s first talk about getting all CSS attribute objects that are finally applied to the element. If no style is set to the element, the browser’s default style will be returned.

1.ele.style

When learning DOM, I see that element style values are obtained through ele.style, but sometimes what I get is not the style values of the node, but the empty value. This is because ele.style can only get the style value written in the style attribute in the element tag, and cannot get the style attributes defined in <style></style> and loaded through <link href="css.css">

example:

 var test = document.getElementById("test"); //Get the color test.style.color of the node;

2. getComputedStyle()

getComputedStyle is a CSS attribute value that can get all the end-used CSS attribute values of the current element.

The syntax is as follows:

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

This method accepts two parameters: to get the element of the computed style and a pseudo-element string (for example ":before"). If pseudo-element information is not required, the second parameter can be null. It can also be used via document.defaultView.getComputedStyle("element", "pseudo-class");

example:

 var test = document.getElementById("test"), demo = window.getComputedStyle(test, null); //Get the color demo.color of the node

Note: Firefox and Safari will convert colors to rgb format. If there is no style on the test node, use style.length to view the number of browser default styles. IE6-8 does not support this method, the following method is required

3. ele.currentStyle

currentStyle is an attribute of the IE browser itself. 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 external link CSS file, the <style> attribute embedded in the page, etc.).

grammar:

 var style = dom.currentStyle;

example:

 var test = document.getElementById("test"), demo = test.currentStyle; //Get the color demo.color of the node;

Note: For comprehensive attribute border, etc., ie returns undefined. Some other browsers return values, and some do not return, but attributes like borderLeftWidth return values.

4. getPropertyValue()

getPropertyValue gets the direct property name of the CSS style

The syntax is as follows:

 window.getComputedStyle(element, null).getPropertyValue(property)

example:

 var test = document.getElementById('test'); window.getComputedStyle(test, null).getPropertyValue("background-color");

Note: The attribute name does not support camel format, IE6-8 does not support this method, so the following method is required

5. getAttribute

getAttribute is similar to getPropertyValue, one difference is the camel format of the property name

example:

 var test = document.getElementById('test'); window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

Note : This method only supports IE6-8

summary:

The jQuery CSS() method, the underlying operation uses the getComputedStyle and getPropertyValue methods. When we use native js development, we can get the value of the element through the above methods.

The following is a method that compatible with ie, firefox, chrome and other browsers to obtain element styles, which can be applied to the project

 function getStyle(ele) { var style = null; if(window.getComputedStyle) { style = window.getComputedStyle(ele, null); }else{ style = ele.currentStyle; } return style;}

The above simple way to obtain element styles in native js is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.