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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
浅谈JavaScript字符集
May 22 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
原生JS生成指定位数的验证码
Oct 28 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
文件上传类
2006/10/09 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
介绍Python中的文档测试模块
2015/04/28 Python
Python实现合并字典的方法
2015/07/07 Python
Python协程的用法和例子详解
2017/09/09 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
新郎新娘答谢词
2015/01/04 职场文书
升学宴学生答谢词
2015/01/05 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
环保主题班会教案
2015/08/13 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Redis三种集群模式详解
2021/10/05 Redis
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL