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

最新推荐文章于 2022-08-14 09:26:23 发布

dyl_love98

最新推荐文章于 2022-08-14 09:26:23 发布

阅读量444

点赞数

CC 4.0 BY-SA版权

文章标签：效果问题

本文链接：https://blog.youkuaiyun.com/javablogs/article/details/8927527

本文探讨了在Internet Explorer 6和7浏览器中使用`setAttribute`方法时遇到的兼容性问题，并提供了一种实用的解决方案。该方案通过自定义函数修正了在这些旧版浏览器中设置特定HTML元素属性时的缺陷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间紧张，先记一笔，后续优化与完善。

问题：

demo1：

1 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 var dom = (function () {
 2             var fixAttr = {
 3                 "class": "className",
 4                 "for": "htmlFor",
 5                 "cellspacing": "cellSpacing",
 6                 "cellpadding": "cellPadding",
 7                 "tabindex": "tabIndex",
 8                 "readonly": "readOnly",
 9                 "maxlength": "maxLength",
10                 "rowspan": "rowSpan",
11                 "colspan": "colSpan",
12                 "usemap": "useMap",
13                 "frameborder": "frameBorder",
14                 "contenteditable": "contentEditable"
15             },
16             supportSetAttr,
17             div = document.createElement("div");
18             div.setAttribute("class", "a");
19             supportSetAttr = div.className === 'a';
20             return {
21                 setAttr: function (elem, name, val) {
22                     if (name != "style")
23                         elem.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
24                     else
25                         elem.style.cssText = val;
26                 },
27                 getAttr: function (elem, name) {
28                     if (name != "style")
29                         return elem.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
30                     return elem.style.cssText.toLowerCase();
31                 }
32             }
33         }());

当初利用dom解决问题：

1 dom.setAttr(elem, 'class', 'bg');
2 dom.getAttr(elem, 'class');
3 
4 dom.setAttr(elem, 'style', 'color:blue');
5 dom.getAttr(elem, 'style');

文章结束给大家分享下程序员的一些笑话语录：有一天，一个男人穿越森林的时候，听到一个细微的声音叫住他。他低头一看，是一只青蛙。
“如果你亲我一下，我会变成一个美丽的公主哦。”男人一言不发，把青蛙捡起来，放入口袋。
“如果你亲我一下，我会变成一个美丽的公主哦。而且，我会告诉我遇到的每一个人，你是多么聪明和勇敢，你是我的英雄。”男人把青蛙拿出来，对着它微微一笑，又把它放回口袋。
“如果你亲我一下，我会变成一个美丽的公主，然后我愿意成为你的爱人一星期。”男人又把青蛙拿出来，对着它微微一笑，把它放回口袋。
“如果你亲我一下，我会变成一个美丽的公主，然后我愿意成为你的爱人一年，而且你可以对我做任何事。”再一次，男人把青蛙拿出来，对着它微微一笑，又把它放回口袋。
　　最后，青蛙无力地问：“我开出了这么好的条件，为什么你还不肯吻我？”男人说：“我是一个程序员，我可没时间和什么公主鬼混。不过，拥有一个会说话的青蛙，倒是蛮酷的。”