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 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php适配器模式介绍
2012/08/14 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP可变函数学习小结
2015/11/29 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
javascript中的this详解
2014/12/08 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Python字符串格式化的方法(两种)
2017/09/19 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
哪些是python中web开发框架
2020/06/17 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python实现弹球小游戏
2020/08/01 Python
Flask处理Web表单的实现方法
2021/01/31 Python
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
党员公开承诺事项
2014/03/25 职场文书
小学生作文评语大全
2014/04/21 职场文书
消防安全承诺书
2014/05/22 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2014年手术室工作总结
2014/11/26 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
科技活动总结范文
2015/05/11 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书