Native js: A simple way to get element styles

In the development process, we often encounter getting or changing the style of DOM elements through js, and there are many methods, such as changing class of DOM elements. Now let's discuss the native js to get the CSS style of the DOM element, noting that getting is not setting

To get all the CSS attribute objects that are finally applied to the element before we begin, we mean that if no style is set to the element, the browser default style will be returned.

1. ele. style

When learning DOM, we saw that the element style value was obtained through ele. style, but sometimes the style value of the node was not obtained, but null 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 value defined in the < style > < /style > And through < link href="css.css" > Style properties loaded in

Examples:

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

    test.style.color;

2. getComputedStyle ()

getComputedStyle is an CSS attribute value that gets 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 evaluation style and a pseudo-element string (for example, ": before"). If pseudo-element information is not required, the second parameter can be null. You can also use document. defaultView. getComputedStyle ("element", "pseudo-class"); To use

Examples:

var test = document.getElementById("test"),
    demo = window.getComputedStyle(test, null); 

    // Object of the node color

     demo.color 

Note: Firefox and Safari convert colors to rgb format. If there are no styles on the test node, check the number of browser default styles through style. length. This method is not supported by IE6-8, and the following method is required

3. ele. currentStyle

currentStyle is an attribute of IE browser. Its syntax is similar to that of ele. style. The difference is that element. currentStyle returns the final CSS attribute value of the current application of the element (including the CSS file in the outer chain and embedded in the page < style > Attributes, etc.).

Syntax:

var style = dom.currentStyle;

Examples:

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

    demo = test.currentStyle; 

    // Object of the node color

    demo.color; 

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

4. getPropertyValue ()

getPropertyValue Gets the direct attribute name of the CSS style

The syntax is as follows:

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

Examples:

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

   window.getComputedStyle(test, null).getPropertyValue("background-color");

Note: Attribute name does not support hump format, which is not supported by IE6-8. The following method is needed

5. getAttribute

getAttribute is similar to getPropertyValue with one difference: the attribute name hump format

Examples:

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

    window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

Note: This method only supports IE6-8

Summary:

The CSS () method of jQuery applies getComputedStyle and getPropertyValue methods at the bottom of its operation. When we use native js development, we can get the value of elements through the above methods.

The following is an ie, firefox, chrome compatible method to get element styles, which can be applied to projects

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