浅谈getAttribute兼容性
最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用。于是百度了一些解决办法。
IE的setAttribute中与标准浏览器的有许多不同，主要表现在IE对setAttribute的功能上有些限制，就是不能用setAttribute来设定class、style于onclick等事件的值以及设置name属性，那这样就会导致setAttribute在IE浏览器里失去很多的用途！而在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。不过当然这bug已经在最新版的IE8中被修复，详情可以浏览微软官网给出的资料。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。
微软的相关资料：NAME Attribute | name Property
请在IE6与IE7下浏览，当然IE8也可以，我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……
解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明，连火狐与W3C那帮死对头也不得不屈服。
请在IE6与IE7下浏览
另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。
请在IE6与IE7下浏览
但name只是冰山一角，setAttribute在设置属性时，有许多属性在IE下与标准浏览器的命名是不一样的，看一下jQuery，发现它也是不全的。许多地雷埋在这里，总有一个你迟早会中的。下面是一个详尽的参照表：左边为标准游览器的，右边是IE的。
**var** IEfix = {
acceptcharset: "acceptCharset"``,
accesskey: "accessKey"``,
allowtransparency: "allowTransparency"``,
bgcolor: "bgColor"``,
cellpadding: "cellPadding"``,
cellspacing: "cellSpacing"``,
"class"``: "className"``,
colspan: "colSpan"``,
checked: "defaultChecked"``,
selected: "defaultSelected"``,
"for"``: "htmlFor" ,
frameborder: "frameBorder"``,
hspace: "hSpace"``,
longdesc: "longDesc"``,
maxlength: "maxLength"``,
marginwidth: "marginWidth"``,
marginheight: "marginHeight"``,
noresize: "noResize"``,
noshade: "noShade"``,
readonly: "readOnly"``,
rowspan: "rowSpan"``,
tabindex: "tabIndex"``,
valign: "vAlign"``,
vspace: "vSpace"
}
IE不能用setAttribute为dom元素设置onXXX属性，换言之，不能用setAttribute设置事件。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By 司徒正美</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var body = document.body;
var form = document.createElement("form");
form.innerHTML = "<input name='test' type='text' />"
body.appendChild(form);
form.elements.test.setAttribute("onfocus", "alert(this.name)");
}
</script>
</head>
<body>
<h3>用setAttribute设置事件</h3>
<p>在IE下文本域获得焦点后并没有弹出预期的alert!</p>
</body>
</html>
IE要直接赋给一个函数！
`**var**` `body = document.body;`
**var** form = document.createElement(``"form"``);
form.innerHTML = "<input name='test' type='text' />"
body.appendChild(form);
**if**``(!+``"\v1"``){
form.elements.test.setAttribute(``"onfocus"``, **function**``(){alert(``**this**``.name)});
}``**else**``{
form.elements.test.setAttribute(``"onfocus"``, "alert(this.name)"``);
}
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By 司徒正美</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var body = document.body;
var form = document.createElement("form");
form.innerHTML = "<input name='test' type='text' />"
body.appendChild(form);
if(!+"\v1"){
form.elements.test.setAttribute("onfocus", function(){alert(this.name)});
}else{
form.elements.test.setAttribute("onfocus", "alert(this.name)");
}
}
</script>
</head>
<body>
<h3>IE用setAttribute设置事件要直接赋函数！</h3>
</body>
</html>
在IE6与IE7中也不能用setAttribute设置样式:**dom.setAttribute("style","font-size:14px")**
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By 司徒正美</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';
var h3 = document.getElementsByTagName("h3")[0]
h3.setAttribute('style', styleData);
}
</script>
</head>
<body>
<h3>IE6与IE7看不到效果！</h3>
</body>
</html>
这时要统一用dom元素的style.csstext属性赋值比较安全。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By 司徒正美</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';
var h3 = document.getElementsByTagName("h3")[0]
if(!+"\v1"){ //IE
//use the .cssText hack
h3.style.cssText = styleData;
} else {
//use the correct DOM Method
h3.setAttribute('style', styleData);
}
}
</script>
</head>
<body>
<h3>h3.style.setAttribute('cssText', styleData);</h3>
</body>
</html>
问题：+"\v1"为何能判断是否为IE？
答案：
其实就是利用各浏览器对转义字符"\v"的理解
在ie浏览器中，"\v"没有转义，得到的结果为"v"
而在其他浏览器中"\v"表示一个垂直制表符（一定程度上相当于空格）
所以ie解析的"\v1" 为 "v1"
而其他浏览器解析到 "\v1" 为 "1"
在前面加上一个"+"是为了把后面的字符串转变成数字
由于ie认为"\v1"为"v1"，所以前面的加上加号无法转变成数字，为NaN
其他浏览器均能变成 1
再因为js与c语言类似，进行逻辑判断时可使用数字，并且 0 为 false，其他数字则为true
所以 !1 = false ，于是其他浏览器均返回false
js在遇到如下几个值会返回false：undefined、null、NaN，所以ie中 !NaN = true
总结：
class和className兼容方法：
object.setAttribute("class","content")
在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。
object.setAttribute("className","content")
只有IE7能设置成功，但是其他浏览器均无法设置。
兼容方法：
使用 object.className="content"
style和cssText兼容方法：
object.setAttribute("style","position:absolute;left:10px;top:10px;")
在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。
object.setAttribute("cssText","position:absolute;left:10px;top:10px;")
此设置方法，所有浏览器均不支持。
兼容方法：
使用 object.style.cssText="position:absolute;left:10px;top:10px;"
或者单独 object.style.各个属性 ，逐一进行设置。
Firefox和IE的JS兼容性：设置元素style熟悉
在IE下setAttribute设置元素的对象、集合和事件属性都只当成普通属性，起不到原有的作用，但可以直接进行赋值操作，如下：
var cssText = ”font-weight:bold;color:red;”
//下面写法用于firefox类型浏览器
element.setAttribute(“style”,cssText);
//下面写法用于IE类型浏览器
element.style.cssText = cssText;
手机扫一扫
移动阅读更方便
你可能感兴趣的文章