如何用js获取元素样式(get.ComputedStyle()和currentStyle方法)

js获取元素的样式有好几种方法，最简单的一种是
Object.style
举个例子：

<div id="box" style="width:100px;">1</div>

<script>
//获取元素的行内样式
document.getElementById('box').style.width;
//赋值行内样式
document.getElementById('box').style.width="300px";
//这样，原行内样式的宽度就从100px被修改成了300px;
</script>

这种方式是获取样式最简单的方法，但是他只能获取到元素的行内样式，如果css样式是写在css文件里或者style中间的话，这种方法就无法获取的到；

第二种方法：
getComputedStyle()

<style>
    #box{
        width:100px;
    }
</style>

<div id="box">1</div>

<script>

var oBox = document.getElementById('box');
//获取样式
getComputedStyle(oBox).width
//可以alert弹出下结果看看
</script>

getComputedStyle()方法经过兼容性的测试，会发现几乎所有的都能支持，但在IE浏览器中，只能支持 IE9及以上的版本，但在实际项目中，IE8的兼容还是要考虑的；

第三种方法：
Obj.currentStyle

<style>
    #box{
        width:100px;
    }
</style>

<div id="box">1</div>

<script>

var oBox = document.getElementById('box');
//获取样式
oBox.currentStyle.width;
//可以alert弹出下结果看看
</script>

这个方法，用alert弹出的时候会发现在IE以外的浏览器中弹出来的均为undefined，可以知道，他只支持IE浏览器，并且测试之后发现支持IE8及以上。

getComputedStyle()和Obj.currentStyle这两种方法，一个完美兼容IE8+，一个兼容其余浏览器，所以可以用if判断下，当前浏览器是否为IE然后采用不同的获取方法（也就是判断是否支持Obj.currentStyle方法）

function getStyle(obj,attr){
    if(obj.currentStyle){                  //如果支持obj.currentStyle方法
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj)[attr];
    };
};
//简写成三目：
function gStyle( obj , attr ){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};
//把这两种方法整合成一个function之后，可以采用传参的方法来获取元素样式
getStyle(oBox,'width');   //获取oBox的width

如果感觉本文对您有帮助，请点击‘顶’支持一下，您的支持是我坚持写作最大的动力，谢谢！
若要转载，请注明文章出处 http://blog.csdn.net/gl0ry/article/details/54791046