你的位置:首页 > Java教程

[Java教程]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); //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];       }    }    /*       获取或者设置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)

 

MDN--getComputedStyle:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle