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

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

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

单一的兼容性可以这样写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .test{

            width: 100px;

            height: 100px;

            background: blue;

        }

        .turn{

            background: red;

            width: 200px;

            height: 300px;

        }

    </style>

    <script>

        window.onload = function() {

            document.getElementsByTagName('button')[0].onclick = function() {

                var div = document.getElementsByTagName('div')[0]

                if(div.getAttribute("class")){//判断是否存在

                    div.setAttribute("class","turn");/*IE8,chrome*/

                }else{

                    div.setAttribute("className","turn")/*IE7-5*/

                }

            }

        }

    </script>

</head>

<body>

    <button>点击切换class</button>

    <div class="test"></div>

</body>

</html>

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<style type="text/css">

.textcolor{

 font-size:18px;

 color:red;

}

</style>

<script type="text/javascript">

dom=(function(){

var fixAttr={

 tabindex:'tabIndex',

 readonly:'readOnly',

 'for':'htmlFor',

 'class':'className',

  maxlength:'maxLength',

  cellspacing:'cellSpacing',

  cellpadding:'cellPadding',

  rowspan:'rowSpan',

  colspan:'colSpan',

  usemap:'useMap',

  frameborder:'frameBorder',

  contenteditable:'contentEditable'

 }, 

 div=document.createElement('div');

 div.setAttribute('class','t'); 

 var supportSetAttr = div.className === 't'; 

 return {

  setAttr:function(el, name, val){

  el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);

  },

  getAttr:function(el, name){

  return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));

 }

}

})();

window.onload=function(){

 var mydiv=document.getElementById("mydiv");

 dom.setAttr(mydiv, 'class', 'textcolor');

}

</script>

</head>

<body>

</body>

</html>

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

例如

document.getElementById("testbt").className = "bordercss";

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. P1894セチの祈り

    描述 在 Ninian 的花园里,有许多琼花,环绕着中间的凉亭.有 N 片琼花,组成一个环.Ninian 想在凉亭中发动 [セチの祈り] , 需要划分出三个区域的琼花,为了平均,要最大化面积最小的区域 ...

  2. [Locked] Shortest Distance from All Buildings

    Shortest Distance from All Buildings You want to build a house on an empty land which reaches all bu ...

  3. SRM 407(1-250pt, 1-500pt)

    DIV1 250pt 题意:每个员工可以有几个直系上司,也可以有几个直系下属.没有直系下属的人工资为1,有直系下属的人工资为所有直系下属工资之和.求所有人工资之和.人数 <= 50. 解法:直接 ...

  4. loadView是干什么用的

    文/natewang(简书作者)原文链接:http://www.jianshu.com/p/f8d261d49615著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. viewContro ...

  5. python字符串连接的三种方法及其效率、适用场景详解

    python字符串连接的方法,一般有以下三种:方法1:直接通过加号(+)操作符连接website=& 39;python& 39;+& 39;tab& 39;+& ...

  6. Mac内建Apache开机启动

    取消: sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 添加: sudo launchctl ...

  7. xcode设置项目图标玻璃镜效果

    xcode5中设置 ios6和ios7的适配一些小细节注意,ios6中图标会默认的设置玻璃镜效果 找到图片文件夹APPlcon中右侧设置中的有个iOS icon is pre-rend-rendere ...

  8. 【安卓】给ViewFlipper加指示器,相似ViewPagerIndicator库提供的那种、！

    思路: 1.viewPager有setOnPageChangeListener能够监听切换动作,但viewFlipper却死活没类似的东西.! 此处有一个变种思路,基于animation,animat ...

  9. arm-linux移植MT7601Uusb无线网卡（小度wifi，360随身WIFI 2代）

    前段时间移植过RT3070.RT5370 http://blog.csdn.net/ofaith12345/article/details/24138399 发现各种arm移植都大同小异,所以就不要纠 ...

  10. [Ruby] LEVEL 2 Methods and Classes

    Optional Arguments Set default arguments, when we don't need to call it, we can simply skip it. def ...