getstyle() 獲取樣式

問題：在js動畫中，如果元素設置了border，padding等，獲取到的樣式是盒子的樣式，這樣會影響動畫的正常顯示。

　　　　

解決方案一：在元素的行內添加樣式  如 

<div style="width=200px">
    
<div>

 

 

解決方案二：通過getstyle()方法獲取樣式

<script type="text/javascript">
//哪個元素
//哪個樣式

function getStyle(obj, attr)
{
 if(obj.currentStyle)
 {
  return obj.currentStyle[attr];
 }
 else
 {
  return getComputedStyle(obj, false)[attr];
 }
}

window.onload=function ()
{
 var oDiv=document.getElementById('div1');
 
 alert(getStyle(oDiv, 'backgroundColor'));
}
</script>

 

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

 

 

//獲取樣式簡潔版
function getStyle(obj, attr) {
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//opacity 設置透明度
function setOpacity(elem, value) {
	elem.filters ? elem.style.filter = 'alpha(opacity=' + value + ')' : elem.style.opacity = value / 100;
}


//完美版
function css(obj, attr, value){
	switch (arguments.length){
		case 2:
			if(typeof arguments[1] == "object"){
				for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
			}else{
				return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
			}
			break;
		case 3:
			attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
			break;
	}
};