Basic code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style></head><body> <div>This is div</div></body></html>1. Get it by using the element.style attribute
<script> var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red</script>The element.style attribute can only get inline styles, cannot get styles in the <style> tag, nor can it get external styles.
Since element.style is an attribute of an element, we can reassign the attribute to override the display of the element.
<script> var div = document.getElementsByTagName("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundColor); //green </script>2. Get styles through getComputedStyle and currentStyle
The use environment of getComputedStyle is chrome/safari/firefox IE 9,10,11
<script> var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow</script>CurrentStyle can be perfectly supported in IE, chrome does not support, ff does not support
<script> var div = document.getElementsByTagName("div")[0]; var styleObj = div.currentStyle; console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow </script>3. The difference between ele.style and getComputedStyle or currentStyle
3.1ele.style is read-write, while getComputedStyle and currentStyle are read-only
3.2 ele.style can only get the CSS style set in the style property in the line, and getComputedStyle and currentStyle can also get other default values.
3.3 What ele.style gets the style in the style attribute, not necessarily the final style, while the other two gets the final CSS style of the element
4. Get style compatibility writing
<script> //Get the non-line style (the style in the style tag or the style in the link css file), obj is the element, attr is the style name function getStyle(obj,attr){ //For IE if(obj.currentStyle){ return obj.currentStyle[attr]; //Because the attr passed by the function is a string, you have to use [] to get the value}else{ //For non-IE return window.getComputedStyle(obj,false)[attr]; } } /* Get or set the css attribute*/ function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } </script>5.window.getComputedStyle(ele[, pseudoElt]);
If the second parameter is null or omitted, get the CSSStyleDeclaration object that is ele
If it is a pseudo-class, the CSSStyleDeclaration object of the pseudo-class is obtained
<style>div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; }div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; }</style><body> <div id='myDiv'> This is div </div> <input id='btn' type="button" value='getStyle'/> <script> var btn = document.querySelector('#btn'); btn.onclick = function(){ var div = document.querySelector('#myDiv'); var styleObj = window.getComputedStyle(div,'after'); console.log(styleObj['width']); } </script></body>6.getPropertyValue gets the specified property value in the CSSStyleDeclaration object
<script> var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color"));</script>propertyName in getPropertyValue(propertyName); cannot be a camel expression
obj.currentStyle['margin-left'] works
obj.currentStyle['marginLeft'] works
window.getComputedStyle(obj,null)['margin-left'] works
window.getComputedStyle(obj,null)['marginLeft'] works
window.getComputedStyle(obj,null).getPropertyValue('margin-left') valid
window.getComputedStyle(obj,null).getPropertyValue('marginLeft') Invalid
obj.currentStyle.width is valid
obj.currentStyle.background-color invalid
obj.currentStyle.backgroundColor works
window.getComputedStyle(obj,null).width valid
window.getComputedStyle(obj,null).background-color invalid
window.getComputedStyle(obj,null).backgroundColor works
In summary, the attribute with "-" cannot be directly pointed out, so there is a getPropertyValue method to handle it, but [] can be used to replace getPropertyValue.
7.defaultView
In many online demo codes, getComputedStyle is called via the document.defaultView object. In most cases, this is not required, as it can be called directly through the window object. But there is a situation where you have to use defaultView, which is to access the styles inside the subframe on firefox3.6 (iframe)
The above simple implementation method of obtaining styles (recommended) of 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.