浅谈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
<!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"){ //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>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;
浅谈getAttribute兼容性的更多相关文章
- 浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
- [原创]浅谈移动互联网App兼容性测试
[原创]浅谈移动互联网App兼容性测试 今天要谈的话题,估计各位测试都有感受,移动互联网App兼容性测试,我们到底测试覆盖如何去挑选机型?具体移动App兼容性测试如何开展?是不是应引进像testin这 ...
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 浅谈Linux中的信号处理机制（二）
首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- jsp内置对象浅谈
jsp内置对象浅谈 | 浏览:1184 | 更新:2013-12-11 16:01 JSP内置对象:我们在使用JSP进行页面编程时可以直接使用而不需自己创建的一些Web容器已为用户创建好的JSP内置对 ...
- JqueryEasyUI浅谈本地化应用
JqueryEasyUI浅谈本地化应用 Jquery是对javascript一种封装,使我们开发人员使用起来更加方便,同时也解决了不同浏览器中javascript的兼容性.JqueryEasyUi是基 ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
随机推荐
- [NOIP2012T3]开车旅行
题目描述 NOIP 2012 提高组 题3小 A 和小 B 决定利用假期外出旅行,他们将想去的城市从 1 到 N 编号,且编号较小的城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市 ...
- CS Academy #32 G
题意: 分析: 考虑如何求方案数 dp[i][j]表示i个数字的和为j的方案数,这是个经典问题,转移有两种,一个是填一个数字1,一个是整体加1 然后这个问题并不是求方案数,而是求对应的权值和 我们很容 ...
- Centos7 下的防火墙端口配置
如果外部不能访问,需要查看防火墙以及服务器的端口安全设置. 防火墙的操作 查看所有打开的端口: firewall-cmd --zone=public --list-ports 添加 firewall- ...
- 【面试 springMVC】【第四篇】springMVC的一些问题
1.springMVC的工作流程是什么样的 1.用户请求到达 2.DispatcherServlet接收请求,发送给处理器映射器 3.处理器映射器handlerMapping,处理找到对应处理器,返回 ...
- 自主学习Flappy Bird游戏
背景 强化学习 MDP基本元素 这部分比较难懂,没有详细看:最优函数值,最优控制等 Q-learning 神经网络 环境搭建 windows下通过pip安装TensorFlow,opencv-pyth ...
- django的form验证机制
今天遇到了一个奇怪的问题,django中formview一直返回200,但是却没有执行form_valid方法,然后在其中加了一个form_invalid方法: class StudentRegist ...
- BUPT复试专题—矩阵幂(2012)
https://www.nowcoder.com/practice/31e539ab08f949a8bece2a7503e9319a?tpId=67&tqId=29638&rp=0&a ...
- 基于 orange(nginx+openresty) + docker 实现微服务 网关功能
摘要 基于 orange(nginx+openresty) + docker 实现微服务 网关功能 ;以实现 docker 独立容器 来跑 独立语言独立环境 在 同一个授权下 运行相关组合程序..年初 ...
- go test test & benchmark
开发程序其中很重要的一点是测试,我们如何保证代码的质量,如何保证每个函数是可运行,运行结果是正确的,又如何保证写出来的代码性能是好的,我们知道单元测试的重点在于发现程序设计或实现的逻辑错误,使问题及早 ...
- archlinux yaourt安装 以及出错细节 database file for "archlinuxfr" does not exist.
archlinux yaourt安装 但一直报错如下: :: Synchronizing package databases... core is up to date extra is u ...