获取非行间样式的获取

当我们的样式写在行间的时候，JS可以通过style获取，

然而style也只能获取或操作行间样式，当我们需要获取非行间的样式时，

应该采用什么方法呢？

　　　首先定义一个div并为他设置样式：　　

<style>
    #div1{width:100px;height:100px;border:1px solid red;}
</style>

<div id="div1"></div>

在IE下：currentStyle用于获取非行间的样式

<script>
    var oDiv=document.getElementById("div1");
    console.log(oDiv.currentStyle.width);
</script>

但是他不兼容火狐，火狐下用的方法是getComputedStyle(obj,false);

第一个参数是要获取的元素，第二个参数随意设置

console.log(getComputedStyle(oDiv,false).width);

但是这样一来IE7又不兼容了，我们可以通过If语句判断实现浏览器的兼容

    function getStyle(obj,name){
        if(obj.currentStyle){
　　　　　　　//IE
            return obj.currentStyle[name];
        }else{
　　　　　　　//火狐
            return getComputedStyle(obj,false)[name];
        }
    }

但是需要注意的是，我们输入参数不能是复合样式，例如background

如果我们要获取背景颜色，输入的参数不能是background而是他下面的单一样式backgroundColor

转载于:https://www.cnblogs.com/qyuan/p/9767618.html