JavaScript获取非行间样式/定义样式

html节点的样式分为以下几种
(1)浏览器默认样式
(2)引用样式(引用外部css文件的样式、style标签内定义的样式)
    引用外部css样式:<link rel="stylesheet" href="css/style.css" type="text/css">
    style标签内:<style> width:100px; </style>
(3)行间样式(节点style属性定义的样式)比如:<div style="width:100px;"></div>

有些童鞋会问：为什么要获取“非行间样式”？

有时候在用JS动态设置一个元素的样式的时候要同时考虑style="display:none"和样式表里面的elem {display:none}这两种情况。举个简单的例子说明：如果单击一个按钮让一个div元素显示或隐藏（单击按钮时如果div默认是隐藏的就显示，反之隐藏）。首先要获取div元素默认的显示状态，如果这时只获取行间样式而样式表里设置了DIV元素的display的话获取的样式就不那么准确。所以除了行间样式外样式表内的非行间样式也要同时获取才行。

下面就是获取非行间样式的示例：

HTML代码：

<style>
    *{ text-align:center;}
    input{ margin-top:30px; padding:10px 20px;}
    #div1{ width:500px; height:300px; background:red; margin:10px   auto;}
</style>

<input type="button" value="style" id="btn" />
<div id="div1"></div>

 

 javascript代码如下：

 <script>
//获取非行间css样式
function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
    if(obj.currentStyle){   //针对ie获取非行间样式
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];   //针对非ie
    };
};
//为对象写入/获取css样式
function css(obj,attr,value){   //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式
    if(arguments.length == 2){  //arguments参数数组，当参数数组长度为2时表示获取css样式
        return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数
    }else{
        if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值
            obj.style[attr] = value;
        };
    };
};
window.onload = function(){
    var oDiv = document.getElementById("div1");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        alert(getStyle(oDiv,"height"));
        css(oDiv,"background","green");
        alert(css(oDiv,"width"));
    };
};
</script>