<!--DOCTYPE html-->
<html>
<head>
<meta charset="utf-8" />
<style>
*{ text-align:center;}
input{ margin-top:30px; padding:10px 20px;}
#div1{ width:500px; height:300px; background:red; margin:10px auto;}
</style>
</head>
<body>
<input type="button" value="style" id="btn" />
<div id="div1"></div>
<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>
</body>
</html>
