<!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100px;height:100px;background-color:red">this is div</div> </body> </html>
通过使用element.style属性来获取
<script> var div = document.getelementsbytagname("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundcolor); //red </script>
element.style属性只能获取行内样式，不能获取<style>标签中的样式，也不能获取外部样式
由于element.style是元素的属性，我们可以对属性重新赋值来改写元素的显示。
<script> var div = document.getelementsbytagname("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundcolor); //green </script>
2.通过getcomputedstyle和currentstyle来获取样式
getcomputedstyle的使用环境是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在ie里能得到完美支持，chrome不支持，ff不支持
<script> var div = document.getelementsbytagname("div")[0]; var styleobj = div.currentstyle; console.log(styleobj.backgroundcolor); //red console.log(styleobj.color); //yellow </script>
3.ele.style和getcomputedstyle或者currentstyle的区别
3.1 ele.style是读写的，而getcomputedstyle和currentstyle是只读的
3.2 ele.style只能得到行内style属性里面设置的css样式，而getcomputedstyle和currentstyle还能得到其他的默认值
3.3 ele.style得到的是style属性里的样式，不一定是最终样式，而其他两个得到的是元素的最终css样式
4.获取样式兼容性写法
<script> //获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名 function getstyle(obj,attr){ //针对ie if(obj.currentstyle){ return obj.currentstyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值 }else{ //针对非ie return window.getcomputedstyle(obj,false)[attr]; } } function css(obj,attr,value){ if(arguments.length == 2){ return getstyle(obj,attr); }else{ obj.style[attr] = value; } } </script> .window.getcomputedstyle(ele[,pseudoelt]);
第二个参数如果是null或者省略，则获取得到是ele的cssstyledeclaration对象
如果是一个伪类，则获取到的是伪类的cssstyledeclaration对象
<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>
getpropertyvalue获取cssstyledeclaration对象中的指定属性值
<script> var div = document.getelementsbytagname("div")[0]; var styleobj = window.getcomputedstyle(div,null); console.log(styleobj.getpropertyvalue("background-color")); </script> getpropertyvalue(propertyname);中的propertyname不能是驼峰式表示 obj.currentstyle['margin-left'] 有效 obj.currentstyle['marginleft'] 有效 window.getcomputedstyle(obj,null)['margin-left'] 有效 window.getcomputedstyle(obj,null)['marginleft'] 有效 window.getcomputedstyle(obj,null).getpropertyvalue('margin-left') 有效 window.getcomputedstyle(obj,null).getpropertyvalue('marginleft') 无效 obj.currentstyle.width 有效 obj.currentstyle.background-color 无效 obj.currentstyle.backgroundcolor 有效 window.getcomputedstyle(obj,null).width 有效 window.getcomputedstyle(obj,null).background-color 无效 window.getcomputedstyle(obj,null).backgroundcolor 有效
综上，就是带有-的属性不能直接点出来，所以有getpropertyvalue方法来处理，但是可以用[]来取代getpropertyvalue
7.defaultview
在许多在线的演示代码中, getcomputedstyle 是通过 document.defaultview 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultview, 那是在firefox3.6上访问子框架内的样式 (iframe)
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
在html里用css隐藏div的方法
用vue+css3怎么做交互特效
前端怎么解决emoji表情无法发送的bug
以上就是js获取获取样式的常见方式的详细内容。