IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值

IE6/7中不能通过setAttribute设置元素的style属性,也不能通过getAttribute获取元素的style属性值。它获取的是一个style对象。

 

如下

1
2
3
4
5
6
7
8
<div style="color:blue">div test</div>
<script type="text/javascript">  
    var div1 = document.getElementsByTagName('div')[0];
     
    // 获取style属性值
    var val = div1.getAttribute('style');
    alert(val);
</script>

IE8/9/Firefox/Safari/Chrome/Opera : 弹出“color:blue”

IE6/7 :则是“[object]”,为一个style对象。

 

又如

1
2
3
4
5
6
7
<div style="color:blue">div test</div>
<script type="text/javascript">
    var div1 = document.getElementsByTagName('div')[0];
     
    // 设置的style
    div1.setAttribute('style', 'color:red');
</script>

IE8/9/Firefox/Safari/Chrome/Opera :div文字的颜色为红色

IE6/7 :没有改变,仍然是蓝色

 

鉴于此,方法setAttr/getAttr要增加对style的处理,如下

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
 *
 * DOM util
 * Version:  0.1
 * Author: snandy
 * Blog: http://snandy.cnblogs.com
 *
 * 1, 普通属性直接name
 * 2, IE6/7中特殊属性如class, for等转义
 * 3, IE6/7中style属性使用cssText
 *
 */
 
dom = (function() {
    var fixAttr = {
        tabindex: 'tabIndex',
        readonly: 'readOnly',
        'for': 'htmlFor',
        'class': 'className',
        maxlength: 'maxLength',
        cellspacing: 'cellSpacing',
        cellpadding: 'cellPadding',
        rowspan: 'rowSpan',
        colspan: 'colSpan',
        usemap: 'useMap',
        valign: 'vAlign',
        frameborder: 'frameBorder',
        contenteditable: 'contentEditable'
    },
     
    p,
     
    div = document.createElement( 'div' );
     
    div.innerHTML = '<p style="color:red;"></p>';
    div.setAttribute('class', 't');
     
    p = div.getElementsByTagName('p')[0];
     
    var
        // http://www.cnblogs.com/snandy/archive/2011/08/27/2155300.html
        setAttr = div.className === 't',
     
        // http://www.cnblogs.com/snandy/archive/2011/03/11/1980545.html
        cssText = /;/.test(p.style.cssText);
     
    var special = {
        style : {
            get: function( el ) {
                var txt = el.style.cssText;
                if(txt) {
                    txt =  cssText ? txt : txt + ';';
                    return txt.toLowerCase();
                }
            },
            set: function( el, value ) {
                return (el.style.cssText = '' + value);
            }  
        }
    };
     
     
    return {
        support : {
            setAttr : setAttr,
            cssText : cssText
        },
        setAttr : function(el, name, val) {
            if(setAttr) {
                el.setAttribute(name, val);
                return val;
                 
            }else {
                if(special[name]) {
                    return special[name].set(el, val);
                     
                }else {
                    el.setAttribute(fixAttr[name] || name, val);
                    return val;
                }
            }
             
        },
        getAttr : function(el, name) {
            if(setAttr) {
                return el.getAttribute(name);
                 
            }else {
                if(special[name]) {
                    return special[name].get(el);
                     
                }else {
                    return el.getAttribute(fixAttr[name] || name);
                }
            }
             
        }
    }
})();

posted on   snandy  阅读(6570)  评论(4编辑  收藏  举报

编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
< 2011年9月 >
28 29 30 31 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 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示