summary:
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:
The code copy is as follows:
var test = document.getElementById("test");
//Get the color of the node
test.style.color;
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:
The code copy is as follows:
var test = document.getElementById("test"),
demo = window.getComputedStyle(test, null);
//Get the color of the node
demo.color
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:
The code copy is as follows:
var test = document.getElementById("test"),
demo = test.currentStyle;
//Get the color of the node
demo.color;
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:
The code copy is as follows:
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:
The code copy is as follows:
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
The code copy is as follows:
function getStyle(ele) {
var style = null;
if(window.getComputedStyle) {
style = window.getComputedStyle(ele, null);
}else{
style = ele.currentStyle;
}
return style;
}