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. BZOJ1572: [Usaco2009 Open]工作安排Job

    1572: [Usaco2009 Open]工作安排Job Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 775  Solved: 337[Submit ...

  2. hdu-2586-How far away ？(离线LCA)

    题意: 给定一棵树,每条边都有一定的权值,q次询问,每次询问某两点间的距离. 分析: 这样就可以用LCA来解,首先找到u, v 两点的lca,然后计算一下距离值就可以了. 这里的计算方法是,记下根结点 ...

  3. SQL中的NULL值

    除is [not] null之外,空值不满足任何查找条件.–如果null参与算术运算,则该算术表达式的值为null.–如果null参与比较运算,则结果可视为false.在SQL-92中可看成unkno ...

  4. JavaScript中的声明提升

    JavaScript中变量或者函数的声明会被提升(赋值语句不会被提升)到当前函数主体的顶部,不管这个声明是否出现在不可到达的地方. var test = 1; function f() { if(!t ...

  5. android下隐藏标题栏

    最近在开发android,遇到一个问题标题栏影响美观,查了很多网上方法. 用到了方法一: requestWindowFeature(Window.FEATURE_NO_TITLE); 虽然一直强调要在 ...

  6. 外星人的供给站 （区间覆盖 t贪心）

    /** 区间覆盖问题 分析: 每个点可以确定两个圆心 圆心的范围形成 一个区间 在这个区间上以任意一点画圆便可将此点 包含在内 如果有两个点所确定的区间相交了 说明这两个点可以用一个圆包含在内 即用一 ...

  7. OpenStack简单测试性能监控数据记录

  8. oracle的nvl函数的使用解析

    Oracle的Nvl函数 nvl( ) 函数 从两个表达式返回一个非null 值. 语法 NVL(eExpression1, eExpression2) 参数 eExpression1, eExpre ...

  9. Huffman编码实现电文的转码与译码

    //first thing:thanks to my teacher---chenrong      Dalian Maritime university /* 构造Huffman Tree思路: ( ...

  10. Multipath多路径冗余全解析

    一.什么是multipath 普通的电脑主机都是一个硬盘挂接到一个总线上,这里是一对一的关系.而到了有光纤组成的SAN环境,由于主机和存储通过了光纤交换机连接,这样的话,就构成了多对多的关系.也就是说 ...