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和s3captche实现一个水果名字的验证
Aug 14 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
js自制图片放大镜功能
Jan 24 Javascript
JS猜数字游戏实例讲解
Jun 30 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中的cookie
2006/11/26 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
浅谈php提交form表单
2015/07/01 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
json简单介绍
2008/06/10 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
python保存数据到本地文件的方法
2018/06/23 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
兽医医药专业求职信
2014/07/27 职场文书
销售顾问工作计划书
2014/08/15 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
世界环境日活动总结
2015/02/11 职场文书
道德与公民自我评价
2015/03/09 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript