作家
登录

IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

作者: 来源:www.28hudong.com 2013-03-30 00:45:30 阅读 我要评论

如设置class属性 复制代码 代码如下:el.setAttribute('class', 'abc'); 在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute('class')能取到值“abc”。 又如for属性 复制代码 代码如下: <label>姓名:</label><input type="checkbox" id="name"/> <script> var lab = document.getElementsByTagName('label')[0]; lab.setAttribute('for', 'name'); </script> 我们知道当lab设置了for属性,点击label将自动将对应的checkbox选中。但以上设置在IE6/7点击将不会选中checkbox。 类似的情况还发生在 cellspacing/cellpadding 上。汇总如下: class for cellspacing cellpadding tabindex readonly maxlength rowspan colspan usemap frameborder contenteditable 因此,当写一个通用的跨浏览器的设置元素属性的接口方法时需要考虑注意以上属性在IE6/7中的特殊性。如下 复制代码 代码如下: dom = (function() { var fixAttr = { tabindex: 'tabIndex', readonly: 'readOnly', 'for': 'htmlFor', 'class': 'className', maxlength: 'maxLength', cellspacing: 'cellSpacing', cellpadding: 'cellPadding', rowspan: 'rowSpan', colspan: 'colSpan', usemap: 'useMap', frameborder: 'frameBorder', contenteditable: 'contentEditable' }, div = document.createElement( 'div' ); div.setAttribute('class', 't'); var supportSetAttr = div.className === 't'; return { setAttr : function(el, name, val) { el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); }, getAttr : function(el, name) { return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); } } })(); 首先,标准浏览器直接使用原始属性名;其次,IE6/7非以上列举的属性仍然用原始属性名;最后这些特殊属性(与JS关键字同名如for,class)使用fixAttr。 好了,现在不用考虑className/htmlFor了,都使用class/for即可。 复制代码 代码如下: dom.setAttr(el, 'class', 'red'); dom.getAttr(el, 'class'); dom.setAttr(el, 'for', 'userName'); dom.getAttr(el, 'for');

  推荐阅读

  JavaScript原型继承之基础机制分析

这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式。 所以严格意义上说,JavaScript 是基于原型的面向对象语言。也就是说,每个实例对象都具有一个原型。对象从该原型中继承属性和方法。 1、>>>详细阅读


本文标题:IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

地址:http://www.17bianji.com/kaifa2/JS/24234.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)