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. LightOJ 1422 Halloween Costumes（记忆化搜索）

    题意:给你n天分别要穿的衣服,可以套着穿,但是一旦脱下来就不能再穿了,问这n天要准备几件衣服.      =============================================== ...

  2. 自己做的网页页面导航浏览JS/JQuery

    需求: 当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条! 为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼), ...

  3. 《University Calculus》-chaper8-无穷序列和无穷级数-p级数

    Q:定义p级数有如下形式,讨论p级数的敛散性.(p>o) 我们以p = 1作为分界点,因为实践表明这个分界点是最优区分度的.那么下面我们进行分情况讨论. 在这之前,我们有必要先引入一个检验敛散性 ...

  4. 字符编码 ASCII，Unicode 和 UTF-8 概念扫盲

    今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步搞清楚. 下面就是我的笔记,主要用来整理自己的思 ...

  5. PHP中echo,print(),print_r()的区别

    echo是 php 语句, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用)    print() 只能打印出简单类型变量的值(如int,string) print_r ...

  6. [Angular 2] Pipe Purity

    Explaining how Pipes only change by default when your Pipe input parameters change and not when your ...

  7. mysql批量删除指定前缀或后缀表

    今天突然发现我们数据库中多出很多表,后缀名为"copy",预计是navicat直接拷贝导致的,然后要对这些有同样后缀名的表进行删除,假设一个一个选择会非常麻烦,表计较多,在网上找了 ...

  8. Java基础知识强化之IO流笔记10：File类输出指定目录下指定后缀名的文件名称案例（File类的文件过滤器方法改进list（ FilenameFilter ff））

    1. 案例: 判断F盘下是否有后缀名为.jpg的文件,如果有的话,就输出这个文件名. 2. 案例代码如下: (1)思路是:先获取所有的文件和文件夹封装的对象,然后遍历的时候,依次判断,如果满足条件就输 ...

  9. LeanCloud使用入门（android）

    LeanCloud算是一个简单易用的云服务器,其中包含了强大的数据库支持,我们只需要将此服务器应用到本地的代码即可实现后台的存储与交互. 那么,如何简单实现本地代码和LeanCloud服务器的交互呢? ...

  10. jQuery中在当前页面弹出一个新的界面

    W.$.dialog({ content:'url:wswgrkbillController.do?snh&id='+b+'&bh='+c+'&ck='+d+'&sl= ...