IE6/7 浏览器存在的setAttribute bug

最新推荐文章于 2016-01-18 17:30:00 发布

asdfede

最新推荐文章于 2016-01-18 17:30:00 发布

阅读量141

点赞数

文章标签： ie

本文链接：https://blog.csdn.net/asdfede/article/details/84364411

版权

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址：http://www.iefans.net/ie-setattribute-bug/ 作者：iefans

IE的setAttribute中与标准浏览器的有许多不同，主要表现在IE对setAttribute的功能上有些限制，就是不能用setAttribute来设定class、style于onclick等事件的值以及设置name属性，那这样就会导致setAttribute在IE浏览器里失去很多的用途！而在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。不过当然这bug已经在最新版的IE8中被修复，详情可以浏览微软官网给出的资料。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。

微软的相关资料：NAME Attribute | name Property
<!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 form = document.createElement("form");
var input = document.createElement("input");
var root = document.body;
input.setAttribute("name", "test");
root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏
form.appendChild(input);
alert(form.elements.test)
}
</script>

</head>
<body>
<h3>请在IE6与IE7下浏览，当然IE8也可以，我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……</h3>
</body>
</html>

解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明，连火狐与W3C那帮死对头也不得不屈服。

<!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);
alert(form.elements.test)
}
</script>

</head>
<body>
<h3>请在IE6与IE7下浏览</h3>
</body>
</html>

另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。

<!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");
try{
var input = document.createElement("<input type='text' name='test'>");
}catch(e){
var input = document.createElement("input");
input.setAttribute("name", "test")
}
body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏
form.appendChild(input);
alert(form.elements.test)
}
</script>

</head>
<body>
<h3>请在IE6与IE7下浏览</h3>
</body>
</html>

但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"){
//use the .cssText hack
h3.style.setAttribute('cssText', styleData);
} else {
//use the correct DOM Method
h3.setAttribute('style', styleData);
}
}
</script>
</head>
<body>
<h3>h3.style.setAttribute('cssText', styleData);</h3>
</body>
</html>

asdfede

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6/7 浏览器存在的setAttribute bug

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明文章引用地址：http://www.iefans.net/ie-setattribute-bug/ 作者：iefansIE的setAttribute中与标准浏览器的有许多不同，主要表现在IE对setAttribute的功能上有些限制，就是不能用setAttribute来设定class、style于onclick等事件的值以...
复制链接

扫一扫