如设置class属性

1
el.setAttribute('class', 'abc');

在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute('class')能取到值“abc”。

又如for属性

1
2
3
4
5
<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 上。汇总如下:

  1. class
  2. for
  3. cellspacing
  4. cellpadding
  5. tabindex
  6. readonly
  7. maxlength
  8. rowspan
  9. colspan
  10. usemap
  11. frameborder
  12. contenteditable

因此,当写一个通用的跨浏览器的设置元素属性的接口方法时需要考虑注意以上属性在IE6/7中的特殊性。如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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即可。

1
2
3
4
dom.setAttr(el, 'class', 'red');
dom.getAttr(el, 'class');
dom.setAttr(el, 'for', 'userName');
dom.getAttr(el, 'for');

IE6/7中setAttribute不支持class/for/rowspan/colspan等属性的更多相关文章

  1. IE6/IE7中display:inline-block解决办法

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  2. IE6 IE7 IE8(Q) 不支持 JSON 对象

    标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...

  3. span&#160;右浮动折行&#160;解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  4. js中setAttribute 的兼容性

    js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...

  5. span 右浮动折行 解决ie6/7中span右浮动折行问题

    RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...

  6. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  7. 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法

    问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...

  8. HTML5中已经不支持元素汇总,持续更新

    HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object):  定义 applet 3.bas ...

  9. IE6/IE7中li底部4px的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...

随机推荐

  1. c# 利用动态库DllImport(&quot;kernel32&quot;)读写ini文件(提供Dmo下载)

    c# 利用动态库DllImport("kernel32")读写ini文件 自从读了设计模式,真的会改变一个程序员的习惯.我觉得嘛,经验也可以从一个人的习惯看得出来,看他的代码编写习 ...

  2. ie8兼容

    最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. NPM 相关

    1. 官方网站 https://docs.npmjs.com/ 2. 显示Global Module安装过什么 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font ...

  4. &gt;&gt;&gt; FilterDispatcher &lt;&lt;&lt; is deprecated! Please use the new filters!

    在struts2.3.20下,web.xml中使用 会出现*********************************************************************** ...

  5. mysql探究之null与not null

    相信很多用了mysql很久的人,对这两个字段属性的概念还不是很清楚,一般会有以下疑问: 1.我字段类型是not null,为什么我可以插入空值 2.为毛not null的效率比null高 3.判断字段 ...

  6. Java之Arrays.asList陷阱

    Java.Util.Arrays可以将数组转换为List,具体的定义如下: @SafeVarargs public static <T> List<T> asList(T... ...

  7. Win 10 关闭了.net framework 3.5后再开启不成功

    背景: Win10 想要使用IETester来测试下页面的浏览器兼容性.在“控制面板”里关闭了.net framework 3.5,再重新开启. 问题: 在重新开启的时候,提示不成功.错误代码0x80 ...

  8. Python:目录和文件的操作模块os.path和OS常用方法

    1.目录和文件的操作模块os.path,在使用之前要先导入:import os.path.它主要有以下几个重要的功能函数: #!/user/bin/python #coding= utf-8 impo ...

  9. mysql故障

    1.服务器上是的电不要随边乱断,一定要保存,然后断电,不要在服务器插座版上乱插其他电器,导致非法断电, 2.出现断电后,检查MYSQL数据库文件是否损坏,可以看WINDOWS 应用程序程序管理日志,提 ...

  10. (弃) Keystone CLI_选项与子命令概况

    本文档介绍icehouse发行版keystone命令 keystone Command-Line Interface (CLI)提供用于和keystone服务器交互的方便工具,但是该命令行工具逐渐受到 ...