IE的setAttribute bug
2009-12-01 09:56
211 查看
IE的setAttribute中与标准浏览器的有许多不同,一不小心地踩雷。你不能用它来设置name属性,你也不能在元素加入DOM后设置type属性,也不能用它直接设置内联事件( inline event handlers),也不能用它设置样式……
在IE6,IE7中,如果动态生成input元素,是无法为其设置name属性的。当然这bug已经在IE8中被修复,详见这里。由于name属性对表单元素非常重要(在提交表单时,与value属性组成键值对,发送到后台),因此必须留意这个bug。
<!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>
运行代码
相关文章推荐
- IE的setAttribute bug
- "position:relative"在IE中的Bug
- 打败 IE 的葵花宝典:CSS Bug Table
- jQuery not过滤选择器在ie的bug
- 关于jsTree 1.0-rc1在IE下自定义图标显示不正常的BUG的解决方法
- 【收藏】挣脱浏览器的束缚(5) - 哭笑不得的IE Bug
- 打败 IE 的葵花宝典:CSS Bug Table
- li嵌套ul在ie下的bug
- IE6下BUG 网页多出一个字 IE bug
- 关于在IE9下RequiredFieldValidator出现“无法获取属性“toLowerCase”的值: 对象为 null 或未定义”的Bug
- 挣脱浏览器的束缚(5) - 哭笑不得的IE Bug
- IE Bug--浮动对象外补丁的双倍距离的解决方法
- 【2017-11-08】document.getElementById 在IE中隐藏的bug
- 新发现的IE的一个BUG
- 由验证控件引起的IE的超级爆笑BUG
- table ie td宽度 bug
- 关于IE的bug(CSS)
- innerHTML 和 getElementsByName 在IE下面的bug 的解决
- ie 处理 gif动画 的onload 事件的一个 bug