获取元素样式的三种方法

首先，css样式表引用的方式有几种呢？不假思索的也知道是三种对吧~

行间样式表 内部样式表 外部样式表

今天说的三种方法来获取元素的样式：

style getComputedStyle currentStyle

style不能获取非行内样式表内的信息；

getComputedStyle和currentStyle可以获取非行内元素样式表的内容；

getComputedStyle不兼容低版本的IE浏览器；

currentStyle不兼容标准浏览器 。

<style>
  #p1{
    height:50px;
    width:60px;
    background:#cfcfcf;
  }
</style>

<script> 
    window.onload=function(){
     var oBtn1=document.getElementById('btn1');
     var oDiv1=document.getElementById('p1');
          oBtn1.onclick=function(){
          alert(oDiv1.style.width);
          alert(oDiv1.currentStyle.width);
          alert(getComputedStyle(oDiv1).width);
          }
      }
</script>

<p id="p1"></p>
<input type="button" value="点击我弹出p的宽" id="btn1"/>

在不同的浏览器试一试，你会发现弹出的东西也不太一样；

IE先警告一下，再弹两次60px；

火狐和chrome都是之弹出一次空的内容，然后直接报错了。

建立一个新的函数用来分类浏览器兼容：

function getStyle(obj,attr){
  return 
   obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

遇到css中用“-”连接起来的属性，在js中应使用驼峰命名法来规范我们的代码。

getStyle(oDiv1,"background-color");
getStyle(oDiv1,"backgroundColor");
//两者都是IE返回#cfcfcf;标准浏览器返回rgb(207, 207, 207);
//建议写第二个

getStyle(oDiv1,"background");
//此处IE警告和火狐瞎了，chrome返回符符合样式：rgb(207, 207, 207) none repeat scroll 0% 0% / auto padding-box border-box 

不要获取未设置的样式 : 不兼容啊

getStyle(oDiv1,"marginTop");
//IE返回auto;标准浏览器返回0px;