getstyle() 获取样式

问题:在js动画中,如果元素设置了border,padding等,获取到的样式是盒子的样式,这样会影响动画的正常显示。

    

解决方案一:在元素的行内添加样式  如 

1
2
3
<div style="width=200px">
     
<div>

 

 

解决方案二:通过getstyle()方法获取样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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;
    }
};

  

posted @   殷的博客-Exploration  阅读(4077)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示