标签：
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代码如下：
1 <script> 2 //获取非行间css样式 3 function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值 4 if(obj.currentStyle){ //针对ie获取非行间样式 5 return obj.currentStyle[attr]; 6 }else{ 7 return getComputedStyle(obj,false)[attr]; //针对非ie 8 }; 9 }; 10 //为对象写入/获取css样式 11 function css(obj,attr,value){ //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式 12 if(arguments.length == 2){ //arguments参数数组，当参数数组长度为2时表示获取css样式 13 return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数 14 }else{ 15 if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值 16 obj.style[attr] = value; 17 }; 18 }; 19 }; 20 window.onload = function(){ 21 var oDiv = document.getElementById("div1"); 22 var oBtn = document.getElementById("btn"); 23 oBtn.onclick = function(){ 24 alert(getStyle(oDiv,"height")); 25 css(oDiv,"background","green"); 26 alert(css(oDiv,"width")); 27 }; 28 }; 29 </script>
标签：
原文地址：http://www.cnblogs.com/chzng/p/5383640.html
