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>