如设置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
1/2 1