【一天一道兼容性】之——IE6、7中的setAttribute

问题：

demo1：

elem.setAttribute('class', 'bg');  //IE6、7中无效果

demo2：

<label>姓名：</label><input type="checkbox" id="name"/>
<script>
    var lab = document.getElementsByTagName('label')[0];
    lab.setAttribute('for', 'name');   //IE6、7点击将不会选中checkbox     
</script>

demo3:

<p id="p1" style="color: red">字体颜色</p>
<script>
     var p = document.getElementById("p1");
     alert(p.getAttribute("style"));           //IE6、7：object   
     p.setAttribute("style", "color:blue");    //IE6、7：无效果  
</script>

此类问题属性汇总:

1. class
2. for
3. cellspacing
4. cellpadding
5. tabindex
6. readonly
7. maxlength
8. rowspan
9. colspan
10. usemap
11. frameborder
12. contenteditable
13. style

解决方案：

var dom = (function () {
            var fixAttr = {
                "class": "className",
                "for": "htmlFor",
                "cellspacing": "cellSpacing",
                "cellpadding": "cellPadding",
                "tabindex": "tabIndex",
                "readonly": "readOnly",
                "maxlength": "maxLength",
                "rowspan": "rowSpan",
                "colspan": "colSpan",
                "usemap": "useMap",
                "frameborder": "frameBorder",
                "contenteditable": "contentEditable"
            },
            supportSetAttr,
            div = document.createElement("div");
            div.setAttribute("class", "a");
            supportSetAttr = div.className === 'a';
            return {
                setAttr: function (elem, name, val) {
                    if (name != "style")
                        elem.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
                    else
                        elem.style.cssText = val;
                },
                getAttr: function (elem, name) {
                    if (name != "style")
                        return elem.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
                    return elem.style.cssText.toLowerCase();
                }
            }
        }());

现在利用dom解决问题：

dom.setAttr(elem, 'class', 'bg');
dom.getAttr(elem, 'class');

dom.setAttr(elem, 'style', 'color:blue');
dom.getAttr(elem, 'style');