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. Linux Kernel ‘skbuff.c’本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘skbuff.c’本地拒绝服务漏洞 CNNVD编号: CNNVD-201307-498 发布时间: 2013-07-24 更新时间: 2013-07-24 危害 ...

  2. 微信下载APK

    腾讯应用宝 微信屏蔽了来源不是腾讯的APK function isWeixin() { var ua = navigator.userAgent.toLowerCase() if(ua.match(/ ...

  3. HDU 5396 Expression(DP+组合数)（详解）

    题目大意: 给你一个n然后是n个数. 然后是n-1个操作符,操作符是插入在两个数字之间的. 由于你不同的运算顺序,会产生不同的结果. 比如: 1 + 1 * 2 有两种  (1+1)*2   或者   ...

  4. Android RSA加密对象数据

    前几天说了手头项目用MD5和双向加密DES来进行加密的,因为产品是在不断的改造中完善的.考虑到DES和MD5加解密还是会存下一定的风险,于是产品一拍,不行,听你们说MD5加密是不安全的,咱们产品以后做 ...

  5. IOS的 testflight测试设置

    管理员邀请参与者 1.登录开发者账号https://developer.apple.com/account 2.进入后,点击ituns connect 3.点击进入用户和职能 4.在用户栏点击添加按钮 ...

  6. poj 1236强连通图缩点

    题目链接:http://poj.org/problem?id=1236 #include <cstdio> #include <cmath> #include <algo ...

  7. [转载]Web前端和后端之区分，以及面临的挑战

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  8. Unable to locate the Javac Compiler 解决办法

    在使用eclipse对maven项目进行编译打包(Run As->Maven install)时,报以下错误:[ERROR] Failed to execute goal org.apache. ...

  9. zookeeper 集群 Cannot open channel to X at election address Error contacting service. It is probably not running.

    zookeeper集群   启动 1.问题现象. 启动每一个都提示  STARTED 但是查看 status时全部节点都报错 [root@ip-172-31-19-246 bin]# sh zkSer ...

  10. java 服务端解决ajax跨域问题

    //过滤器方式 可以更改为拦截器方式public class SimpleCORSFilter implements Filter { public void doFilter(ServletRequ ...