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.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
13个PHP函数超实用
Oct 21 Javascript
js中常用的Math方法总结
Jan 12 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
jquery中this的使用说明
2010/09/06 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
python几种常用功能实现代码实例
2019/12/25 Python
python global和nonlocal用法解析
2020/02/03 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python 远程开关机的方法
2020/11/18 Python
Django中ORM的基本使用教程
2020/12/22 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
给学校的建议书
2014/03/12 职场文书
求职意向书
2014/04/01 职场文书
保护环境建议书100字
2014/05/13 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
保研专家推荐信范文
2015/03/25 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python