JS之获取样式的简单实现方法（推荐）

基本代码：

<！DOCTYPE html><html lang="en"><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>

1.通过使用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）; //redconsole.log（styleObj.color）; //yellow</script>

currentStyle在IE里能得到完美支持，chrome不支持，ff不支持

<script>var div = document.getElementsByTagName（"div"）[0];var styleObj = div.currentStyle;console.log（styleObj.backgroundColor）; //redconsole.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]; }}/* 获取或者设置css属性*/function css（obj,attr,value）{ if（arguments.length == 2）{ return getStyle（obj,attr）; }else{obj.style[attr] = value; }}</script>

5.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>

6.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）
以上这篇JS之获取样式的简单实现方法（推荐）就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。