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真是一个伟大的发明
<!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 </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</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>
分享到:
相关推荐
NULL 博文链接:https://rogerfederer.iteye.com/blog/1938725
在IE中脚本不能以setAttribute()来设置其样式信息(css),必须采用element.style.property=value(注:此处value为要设定的值)的方式来实现某个元素的呈现效果。 eg.document.getElementById(“id”).style....
The method setAttribute(String, Object) in the type ServletRequest is not applicable for the arguments (String, double) y2ssh.sg.chp1.action.AddAction.execute(AddAction.java:18) y2ssh.sg.chp1....
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性的说明,需要的朋友可以参考下。
新版邮箱项目中做页签功能时碰到的。table元素的 cellpadding 和 cellspacing 属性意义不提了。它们也有对应的css解决方案。
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题
如果把input.focus()放在一个setTimeout中延时执行,则就可以获得焦点。 代码如下:[removed] (function(){ function get(id){ return document.getElementById(id);... input.setAttribute(‘type’, ‘tex
博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的...由于IE8不支持setAttribute方法,这里添加的onclick事件处理程序并未添加上。 后来改为jQuery的attr方法: 代码如
setAttribute 与 class冲突解决
主要介绍了javascript中setAttribute()函数使用方法及兼容性的相关资料,需要的朋友可以参考下
meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>创建组合</title> [removed][removed] [removed][removed] </head> <body <div class="chose2" ms-controller=...
今天小编就为大家分享一篇关于PDO::setAttribute讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
测试环境(客户端浏览器 ) IE6,IE7, IE8兼容模式, IE8 Firefox 3.6.8, google chrome 5.0.375.125 先来说明两个函数的标准定义。 elementNode.setAttribute(name,value) name 必需。规定要设置的属性名。 value ...
本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute(“XXXX”)。 3:当获取的目标是JS里的关键字时建议...
今天小编就为大家分享一篇关于PHP PDOStatement::setAttribute讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
dom.setAttribute(“style”,”width:10px;height:10px;border:solid 1px red;”) ; IE中则必须使用style.cssText var dom=document.getElementById(“name”); dom1.style.cssText = “width:10px;height:10px;...
代码如下: var asubmit = document.... //在火狐中有效,而在ie中无效 代码如下: <span xss=removed> asubmit.setAttribute(“onclick”,”[removed]document.buyform.submit();”);</span> //在ie中有效,火