如设置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. raspbian 静态IP

    edit file:  /etc/network/interfaces change line: iface eth0 inet dhcp iface eth0 inet static address ...

  2. Java 感知Mysql存储过程变量数量

    在项目中,可能会遇到sybase 移植到 mysql的情况,因为sybase 支持存储过程的可变参数,而mysql不能支持,所以,在调用mysql的时候,需要感知存储过程到底有几个参数,来合理的配置参 ...

  3. linux批量添加10个用户并将其随机密码和用户名写入文件

    需求: 批量新建10个测试用户,并且让其密码随机,把用户名和密码写入一个文件,并有创建时间和创建者 #!/usr/bin/python # -*- coding: utf-8 -*- import o ...

  4. python requests库学习笔记(下)

    1.请求异常处理 请求异常类型: 请求超时处理(timeout): 实现代码: import requestsfrom requests import exceptions        #引入exc ...

  5. 持续交付之软件包管理maven篇

    背景 持续交付的我们常见的流程如下,其中有一个环节就是软件包管理 今天我们以maven仓库为示例,如下是Jenkins与CD生态: 持续交付的示例 5 Principles 五个原则 Deliver ...

  6. WIN10 64位系统 如何安装.NET Framwork3.5

    把SXS文件夹复制到C盘根目录,然后以管理员身份运行CMD,大概2分钟能完成,然后这个SXS文件夹就可以删了        

  7. R程序包

    === 数据基础操作 ===reshape2 横向.纵向做数据变换,例如把纵向堆叠在数据库中的证券行情数据转换成一个按照不同证券代码横向排列,按照时间纵向排列收盘价的数据表stringr 方便地用正则 ...

  8. 软件工程-东北师大站-第十二次作业(PSP)

    1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 4.本周PSP饼状图

  9. spark-sql执行流程分析

    spark-sql 架构 图1 图1是sparksql的执行架构,主要包括逻辑计划和物理计划几个阶段,下面对流程详细分析. sql执行流程 总体流程 parser:基于antlr框架对 sql解析,生 ...

  10. baidu地图api , 地理位置转 经纬度接口

    更多可以查看    http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding 地理编码示例: 以下是关于地理编 ...