Summary of native methods for obtaining styles in JavaScript_javascript tips

ps: It is to get the style, not to set the style. If no style value is set for the element, the default value given by the browser is returned. (Forum arrangement)

1. element.style: can only obtain the style value written in the style attribute in the element tag, and cannot obtain the style value defined in and through Loaded style attributes

Copy code The code is as follows:

var ele = document.getElementById('ele');
ele.style.color; //Get color

2. window.getComputedStyle(): can get all the final CSS attribute values ​​of the current element.

Copy code The code is as follows:

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

This method accepts two parameters: the element to get the calculated style from and a pseudo-element string (such as ":before"). If pseudo-element information is not required, the second parameter can be null. You can also use document.defaultView.getComputedStyle("element", "pseudo-class");

Copy code The code is as follows:

var ele = document.getElementById('ele');
var styles = window.getComputedStyle(ele,null);
styles.color; //Get the color

You can view the number of browser default styles through style.length. IE6-8 does not support this method and you need to use the later method. For Firefox and Safari, the color will be converted to rgb format.

3. element.currentStyle: IE-specific, returns the final CSS attribute value currently applied to the element (including external link CSS files,

4. getPropertyValue(): Get the direct attribute name of the CSS style

Copy code The code is as follows:

var ele = document.getElementById('ele');
window.getComputedStyle(ele,null).getPropertyValue('color');

Note: Attribute names do not support camel case format. IE6-8 does not support this method. You need to use the following method

5. getAttribute(): is similar to getPropertyValue. The only difference is the camel case format of the attribute name

Copy code The code is as follows:

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

Note: This method only supports IE6-8.

The following method of obtaining styles is compatible with IE, chrome, FireFox, etc.

Copy code The code is as follows:

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

In JQuery, css() is commonly used to obtain style attributes, and its underlying operation uses the getComputedStyle and getPropertyValue methods.