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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Vue动态面包屑功能的实现方法
Jul 01 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
pytorch梯度剪裁方式
2020/02/04 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
华为python面试题
2016/05/03 面试题
毕业生物理教师求职信
2013/10/17 职场文书
店长职务说明书
2014/02/04 职场文书
合作意向书格式及范文
2014/03/31 职场文书
社区志愿者培训方案
2014/06/10 职场文书
搞笑婚前保证书
2015/02/28 职场文书
秋菊打官司观后感
2015/06/03 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python