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


Posted in Javascript onAugust 28, 2011

如设置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天然的迭代器
Oct 29 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 #Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 #Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 #Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 #Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 #Javascript
JavaScript 原型继承之构造函数继承
Aug 26 #Javascript
You might like
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python3简单实现串口通信的方法
2019/06/12 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
10个顶级Python实用库推荐
2021/03/04 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
医学专业自荐信
2014/06/14 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
护理专业自荐信范文
2015/03/06 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers