获取元素样式

晚上看了羊肉泡馍的视频，有点作妖，，沉浸到无法思考的时候，忽然想起明天又要过节了哈哈哈哈，所以抽点空谈谈使用一些方法获取元素样式。。 orz不能偷懒

---

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

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

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

• style
• getComputedStyle
• currentStyle

---

• style不能获取非行内样式表内的信息；
  getComputedStyle和currentStyle可以获取非行内元素样式表的内容；

• getComputedStyle不兼容低版本的IE浏览器；
  currentStyle不兼容标准浏览器 。

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

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

<div id="div1"></div><input type="button" value="点击我弹出div的宽" 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;

嗯。。最后。。getComputedStyle可以有两个参数，主要就是为了兼容火狐4.0之前的版本，默默地看了看一连网就自动更新的火狐君。56.0.1。。╭(╯^╰)╮省略省略掉。。

睡觉，梦里去西安吃羊肉泡馍~~