IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

如设置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');

赞 (0)

相关推荐

  • js setattribute批量设置css样式

    firefox等可以使用 var dom=document.getElementById("name"); dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ; IE中则必须使用style.cssText var dom=document.getElementById("name"); dom1.style.cssText = &q

  • JS getAttribute和setAttribute(取得和设置属性)的使用介绍

    getAttribute:取得属性:setAttribute:设置属性: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>    <head>        <meta http-equiv="Content-Type" content=&q

  • JavaScript的setAttribute兼容性问题解决方法

    复制代码 代码如下: var asubmit = document.getElementById("submit"); 复制代码 代码如下: <span style="white-space:pre"> </span>asubmit.setAttribute("onclick","alert('请检查手机号码');"); //在火狐中有效,而在ie中无效 复制代码 代码如下: <span styl

  • javascript中setAttribute()函数使用方法及兼容性

    setAttribute()函数可以设置对象的属性,如果不存在此属性,则会创建此属性. 语法结构: el.setAttribute(name,value) 参数列表: 参数 描述 name 必需.规定要设置的属性名. value 必需.规定要设置的属性值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <script type="text/javas

  • javascript setAttribute, getAttribute 在不同浏览器上的不同表现

    javascript setAttribute, getAttribute 在不同浏览器上的不同表现

    测试环境(客户端浏览器 ) IE6,IE7, IE8兼容模式, IE8 Firefox 3.6.8, google chrome 5.0.375.125 先来说明两个函数的标准定义. elementNode.setAttribute(name,value) name 必需.规定要设置的属性名. value 必需.规定要设置的属性值. 该方法把指定的属性设置为指定的值.如果不存在具有指定名称的属性,该方法将创建一个新属性. elementNode.getAttribute(name) name 必

  • setAttribute 与 class冲突解决

    假设,我们要使用setAttribute来改变一个dom的class时,应该如何写?    1. setAttribute("class","red")    2. setAttribute("className","red") 答案是:   选项1. 在firefox下使用   选项2. 在IE下使用 如果在IE下给DOM setAttribute("class") 使用IE Developer看结构会发

  • JavaScript中setAttribute用法介绍

    setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值.1.样式问题setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号.vName代表对样式赋值.例如: 复制代码 代码如下: var input = document.createElement("input");input.setAttribut

  • IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    如设置class属性 复制代码 代码如下: el.setAttribute('class', 'abc'); 在IE6/7中样式"abc"将没有起作用,虽然使用el.getAttribute('class')能取到值"abc". 又如for属性 复制代码 代码如下: <label>姓名:</label><input type="checkbox" id="name"/> <script

  • IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理

    昨天在使用Jquery Ui Datapicker做显示签到日历功能的时候,出现了Js问题,在IE8/IE9以及FF.Chrome下都显示正常, 但是在IE6/IE7以及IE8兼容视图下显示有问题,提示"页面上有错误",进一步查看显示错误信息"缺少标识符.字符串或数字", 一开始以为是Jquery 和Jquery Ui的版本不匹配导致的,后来尝试了其他支持的版本也是不行, 然后将自己的Js代码逐段调式,在花了两个多小时后终于以外的发现是由Json最后一个键值后加了逗

  • 对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)

    有时需要将数组转成伪数组(ArrayLike),如下 复制代码 代码如下: var ary = ['one','two','three']; var obj = {}; // 没有length属性 Array.prototype.push.apply(obj, ary); for(var i in obj){ alert(i + ': ' + obj[i]); } IE8/9/Firefox/Safari/Chrome 依次弹出了obj的key及其value.即能转换成ArrayLike. 但I

  • 解决IE7中使用jQuery动态操作name问题

    解决IE7中使用jQuery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就不能调试,就不能知道改了后还会不会有这样的问题. 想想可能与客户环境唯一不同就只有可能是js缓存问题了,然后把所有的js文件引用的地方都加上一个当前时间参数,然问题依然存在. 本来规定的版本就是IE8,所以也没有想过会有版本兼容问题,在说了咱用的是jquery,jqeruy的出现不就是号称为了解决浏

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • ie6,ie7,ie8完美支持position:fixed的终极解决方案

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁. 复制代码 代码如下: <div id="goTop_div" class="fixed ie">  </div> css: 复制代码 代码如下: .fixed{         positio

  • 支持IE6 IE7 Firefox 的纯CSS的下拉菜单

    支持IE6 IE7 Firefox 的纯CSS的下拉菜单

    纯CSS的下拉菜单 支持IE6 IE7 Firefox *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} .menu tab

  • IE6与IE7中，innerHTML获取param的区别

    IE6与IE7中，innerHTML获取param的区别

    代码: 复制代码 代码如下: <html> <head> <script type="text/javascript"><!-- function setMode(newMode) { var text1=document.getElementById("text1"); var cont; bTextMode = newMode; if (bTextMode) { cont=text1.innerHTML; text1.i

  • IE6、IE7中获取Button元素的值的bug说明

    IE6、IE7中获取Button元素的值的bug说明

    测试代码如下: 复制代码 代码如下: <button value="abc">测试</button> <script> var btn = document.getElementsByTagName('button')[0]; alert(btn.value); alert(btn.getAttribute('value')); </script> IE6/7: IE8/9/10/Firefox/Safari/Chrome/Opera:

  • javascript中setAttribute兼容性用法分析

    本文实例分析了javascript中setAttribute兼容性用法.分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX. 2:自定义属性建议使用node.getAttribute("XXXX"). 3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for. 4:当获取的目标是保留字,如:class,请使用className代替. setAttribute(string name,

随机推荐