setAttribute各个浏览器都支持，但在IE7以下版本中，有些属性值还是有差异的，比如

  1. obj.setAttribute("class","classname")

在ie8等主流浏览器能起效，但在IE7以下版本中不起作用，因为IE7以下版本不认得“class”,他们只认得“className”;

单一的兼容性可以这样写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .test{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: blue;
  11.         }
  12.         .turn{
  13.             background: red;
  14.             width: 200px;
  15.             height: 300px;
  16.         }
  17.     </style>
  18.     <script>
  19.         window.onload = function() {
  20.             document.getElementsByTagName('button')[0].onclick = function() {
  21.                 var div = document.getElementsByTagName('div')[0]
  22.                 if(div.getAttribute("class")){//判断是否存在
  23.                     div.setAttribute("class","turn");/*IE8,chrome*/
  24.                 }else{
  25.                     div.setAttribute("className","turn")/*IE7-5*/
  26.                 }
  27.             }
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <button>点击切换class</button>
  33.     <div class="test"></div>
  34. </body>
  35. </html>

以上代码可以让setAttribute的class兼容所有主流浏览器

但除了class有差异外，还有下列属性也有差异

  • class
  • for
  • cellspacing
  • cellpadding
  • tabindex
  • readonly
  • maxlength
  • rowspan
  • colspan
  • usemap
  • frameborder
  • contenteditable
  • style

为了解决上述问题就要写一个通用的跨浏览器的设置元素属性的接口方法:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=" utf-8">
  5. <style type="text/css">
  6. .textcolor{
  7.  font-size:18px;
  8.  color:red;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. dom=(function(){
  13. var fixAttr={
  14.  tabindex:'tabIndex',
  15.  readonly:'readOnly',
  16.  'for':'htmlFor',
  17.  'class':'className',
  18.   maxlength:'maxLength',
  19.   cellspacing:'cellSpacing',
  20.   cellpadding:'cellPadding',
  21.   rowspan:'rowSpan',
  22.   colspan:'colSpan',
  23.   usemap:'useMap',
  24.   frameborder:'frameBorder',
  25.   contenteditable:'contentEditable'
  26.  }, 
  27.  
  28.  div=document.createElement('div');
  29.  div.setAttribute('class','t'); 
  30.  
  31.  var supportSetAttr = div.className === 't'; 
  32.  
  33.  return {
  34.   setAttr:function(el, name, val){
  35.   el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
  36.   },
  37.   getAttr:function(el, name){
  38.   return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
  39.  }
  40. }
  41. })();
  42. window.onload=function(){
  43.  var mydiv=document.getElementById("mydiv");
  44.  dom.setAttr(mydiv, 'class', 'textcolor');
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. </body>
  50. </html>

另外，同样可以使用element.style的方式去更改

例如

  1. document.getElementById("testbt").className = "bordercss";
  2. document.getElementById("testbt").style.cssText = "color: #00f;";

参考自:http://www.jb51.net/article/69685.htm

JavaScript 的setAttribute兼容性解决的更多相关文章

  1. AngularJS进阶(三十五)浏览器兼容性解决之道

    浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...

  2. Javascript selection的兼容性写法介绍

    本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...

  3. <转>JavaScript的IE和火狐的兼容性解决办法

    原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.form ...

  4. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  5. Javascript 多浏览器兼容性问题及解决方案

    一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...

  6. border-radius,box-shadow兼容性解决办法

    css3 border-radius不支持IE8/IE7的四种解决方法 标签: cssborder-radius兼容性   时间:2016-07-18 css3 border-radius用于设置HT ...

  7. javascript获取style兼容性问题

    获取css 样式的方法有三种 : style, currentStyle , getComputedStyle style (无兼容性问题) 获取语法: ele.style.attr : 设置语法:e ...

  8. 不同浏览器之间的javascript和css兼容性问题

    po主手头维护的网站是上世纪的作品.当时约摸ie所占的市场份额相当大,以至于开发人员都没有考虑到浏览器兼容性问题(这不科学!).怎奈po主是个强迫症阿.最近在修改的时候,还是没忍住,把兼容性问题解决了 ...

  9. WCF不支持 ASP.NET 兼容性 解决办法

    错 误提示:无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式或将 AspNetCompa ...

随机推荐

  1. 【转】eclipse -- the project was not built due to a resource exists with a different case...

    原文网址:http://blog.csdn.net/mylinx/article/details/44280563 进行编码时,工程前面莫名有个红X,正当百思不得其解时,发现在[problems]下有 ...

  2. uri编解码

    相关函数如下:(都是全局函数) encodeURI(URIString):将文本字符串编码为有效的统一资源标示符URI decodeURI(URIString) encodeURIComponent( ...

  3. 奔跑的xiaodao

    http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=2086 很明显的一个二分题目.因为要 ...

  4. 在mac中用终端来运行.c文件

    第一步:打开终端,位置在lauchpad中去找搜索. 第二步:建一个.c文件. 第三步: 在终端输入.c路径.用cd命令 第五步:cc -c +tab键.生成.O文件 第六步:cc +tab键.生成. ...

  5. 动态规划——A 最大子段和

    A - 最大子段和 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  6. poj2299

    好吧,看到这个图片就知道是干什么的了,求逆序数- - 可以用线段树,貌似还可以用归并排序,这题应该是考的归并排序,毕竟是递归分治- - 基本上都忘了,再写一写试试吧. AC ///////////// ...

  7. oGitHub 注册

    GitHub 注册 要想使用 GitHub 第一步当然是注册 GitHub 账号: 1.首先打开 https://github.com/pricing 进行注册. 2.在打开的页面中点击「Sign u ...

  8. php数组和字符串转换

    PHP 中由于数组和字符串这两种变量类型是如此常用,以至于 PHP 具有两个函数,可以在字符串和数组之间互相进行转换. $array=explode(separator,$string); $stri ...

  9. OneToMany与ManyToOne的属性

    供自己查阅,嫌低级的勿喷! 1.OneToMany的属性 ①targetEntity 定义关系类的类型,默认是该成员属性对应的类类型,所以通常不需要提供定义. ②mappedBy 定义类之间的双向关系 ...

  10. nginx 配置 开发

    1 .安装: 2.修改配置文件nginx.conf 添加server: