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

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

如下

<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对象。

又如

<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的处理，如下

/**
 *
 * 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);
                }
            }
             
        }
    }
})();