IE6/7中setAttribute不支持class/for/rowspan/colspan等属性
如设置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 上。汇总如下:
- class
- for
- cellspacing
- cellpadding
- tabindex
- readonly
- maxlength
- rowspan
- colspan
- usemap
- frameborder
- 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等属性的更多相关文章
- IE6/IE7中display:inline-block解决办法
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- IE6 IE7 IE8(Q) 不支持 JSON 对象
标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
A floated box is shifted to the left or right until its outer edge touches the containing block edge ...
- js中setAttribute 的兼容性
js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...
- IE6/IE7中li底部4px空隙的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...
- 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法
问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...
- HTML5中已经不支持元素汇总,持续更新
HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object): 定义 applet 3.bas ...
- IE6/IE7中li底部4px的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...
随机推荐
- 小甲鱼PE详解之区块表(节表)和区块(节)续(PE详解05)
这一讲我们结合实例来谈谈区块表的定义以及各个属性的含义. 首先,我们先用之前学过的一点知识在二进制文件中手动翻找区块表,这样做的好处是可以使你很快的对PE结构牢记于心.学来的东西就是能用的东西,不能用 ...
- 【shiro】一、基础概念
来源:http://blog.csdn.net/swingpyzf/article/details/46342023/ &&&& http://jinnianshilo ...
- 文件的存储读写,XML文件的存储与读写
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...
- java 输入输出流1 FileInputStrem&&FileOutStream
通过文件输入流读取问价 package unit6; import java.io.FileInputStream; import java.io.FileNotFoundException; imp ...
- C. Graph and String
二分图染色 b点跟除自身外所有的点连接,共n-1个,首先把连接n-1个的点全部设为b点,其它点任意一点设为a,与a相连的都是a点,剩余为c点.最后验证是否成立. 验证条件为,所有连接的点之间的差值的绝 ...
- CodeForces 222B Cosmic Tables
Cosmic Tables Time Limit:3000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Subm ...
- 用c++处理文件流
#include<bits/stdc++.h> using namespace std; struct Bian { int num; string name; }b[]; int mai ...
- LightOJ1417 Forwarding Emails(强连通分量+缩点+记忆化搜索)
题目大概是,每个人收到信息后会把信息发给他认识的一个人如此下去,问一开始要把信息发送给谁这样看到信息的人数最多. 首先找出图中的SCC并记录每个SCC里面的点数,如果传到一个SCC,那么里面的人都可以 ...
- BZOJ3679 : 数字之积
设f[i][p2][p3][p5][p7][j][k]表示前i位,2,3,5,7的次数,前i位是否等于x,是否有数字的方案数 然后数位DP即可,ans=cal(r)-cal(l) #include&l ...
- android BroadcastReceiver ACTION_TIME_TICK 系统时间监听不到
android BroadcastReceiver ACTION_TIME_TICK 系统时间监听不到 今天做android上的消息推送,启动了一个独立service,然后在里面监听系统的ACTION ...