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. C#里4个访问权限修饰符

    C#里类及类成员的修饰符有以下五个如下:public 公开 类及类成员的修饰符 对访问成员没有级别限制private 私有 类成员的修饰符 只能在类的内部访问protected 受保护的 类成员的修饰 ...

  2. arcgis安装问题SDK开始安装不了

    arcgis安装问题SDK开始安装不了,提示安装Desktop10,安装Desktop10又提示装dotnetfx3.5sp1,最后其实不用这样,可以先把军事扩展包,补丁,安装好,再安装sdk就没有问 ...

  3. 关于 NoSQL 数据库你应该了解的 10 件事

    四分之一个世纪以来,关系型数据库(RDBMS)一直是主流数据库模型.但是现在非关系型数据库,“云”或者“NoSQL”数据库,正在作为一种替代数据库模型获得越来越多的占有率.本文中我们将关注非关系型 N ...

  4. Oulipo - HDU 1686 （KMP模板题）

    题目大意:题目叙述很多,其实只看输入输出也能明白什么意思,给两个串W,T, 判断T串中包含几个串W.   分析:还是基础的KMP应用....................... 直接上代码. === ...

  5. hdoj 1711 Number Sequence【求字串在母串中第一次出现的位置】

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. Servlet线程安全

    public class servletDemo1 extends HttpServlet { int i=0; public void doGet(HttpServletRequest reques ...

  7. dos 命令

    DOS远程桌面连接命令 mstsc /v: 192.168.1.250 /console cmd 运行 command删除文件 rd 文件名/S创建文件 MD 文件名 1. net user admi ...

  8. 【Java每日一题】20170109

    20170106问题解析请点击今日问题下方的"[Java每日一题]20170109"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  9. erlang mnesia数据库设置主键自增

    Mnesia是erlang/otp自带的分布式数据库管理系统.mnesia配合erlang的实现近乎理想,但在实际使用当中差强人意,总会有一些不足.mnesia数据表没有主键自增的功能,但在mnesi ...

  10. 在Ubuntu上下载、编译和安装Android最新源码

    看完了前面说的几本书之后,对Linux Kernel和Android有一定的认识了,是不是心里蠢蠢欲动,想小试牛刀自己编译一把Android源码了呢?一直习惯使用Windows系统,而Android源 ...