一、el.setAttribute('class','abc');

代码如下:

 .abc {
background: red;
}

test div

 var div = document.getElementById('d1');
div.setAttribute("class", "abc");

IE6/7 : div背景色不是红色

    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色

    结果:IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

 二、el.setAttribute('className', 'abc')

   

代码如下:

 

  .abc {
background: red;
}

test div

    var div = document.getElementById('d1');
div.setAttribute("className", "abc");

IE6/7 : div背景色为红色

    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色

    结果:IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。

    很有趣,使用setAttribute的时候第一个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。

三、el.className = 'abc';

  代码如下:

 .abc {
background: red;
}

test div

   var div = document.getElementById('d1');
div.className = 'abc';

所有浏览器都支持。

原文地址:http://www.shangxueba.com/jingyan/1906397.html

js中设置元素class的三种方法小结的更多相关文章

  1. JavaScript中设置元素class的三种方法小结

    第一.element.setAttribute('class','abc');  第二.element.setAttribute('className', 'abc') : 第三.element.cl ...

  2. Android中设置文本颜色的三种方法

    最近刚开始学web,发现好的颜色搭配可以让自己的网页更加美观, 中午不想做事,就无聊滴花了两个小时测试了所有颜色的编码,总结如下 新手没有什么吊炸天的技术,仅仅是一份辅助的文档,有兴趣的朋友可以收藏下 ...

  3. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

  4. Java中获取键盘输入值的三种方法

    Java中获取键盘输入值的三种方法     Java程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值 ...

  5. 【转载】取得系统中网卡MAC地址的三种方法

    From:http://blog.csdn.net/zhangting1987/article/details/2732135 网卡地址这个概念有点混淆不清.因为实际上有两个地址,mac地址和物理地址 ...

  6. JS变量和变量交换的三种方法

    一.what 变量就是用来存储数据的容器 二.how 通过var 关键字定义一个变量 var n1; //定义变量 变量的赋值:通过赋值运算符“=” 给变量赋值. var n2=123; //定义变量 ...

  7. 两种设置disabled属性以及三种方法移除disabled属性

    //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...

  8. JS中date日期初始化的5种方法

    创建一个日期对象: 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh ...

  9. Postgresql 创建主键并设置自动递增的三种方法

    Postgresql 有以下三种方法设置主键递增的方式,下面来看下相同点和不同点. --方法一create table test_a (  id serial,  name character var ...

随机推荐

  1. java使用jsch连接linux

    由于项目需要使用java来linux进行管理,近一番查找,发现第三方jar包 jsch 可以轻松实现对linux的管理,(相关文档及例子请访问官网www.jcraft.com),故引进. 在网上搜索了 ...

  2. Android IOS WebRTC 音视频开发总结(八十一)-- WebRTC靠谱吗?有没有适合的SDK推荐?

    作者:blaker,最早发表在我们的微信公众和[编风网],详见[这里] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blackerteam 或 webrtcorgcn) ...

  3. 通过innobackupex实现对MySQL的增量备份与还原

    备份 增量备份是基于完整备份的,所以我们需要先做一次完整备份: innobackupex --password=test /backup/ 备注:test是我的MySQL服务的root用户的密码,/b ...

  4. iOS图片加载到内存中占用内存情况

    我的测试结果: 图片占用内存   图片尺寸           .png文件大小 1MB              512*512          316KB 4MB              10 ...

  5. 一、MMA概述

    一.MMA概述                     返回目录页1.MMA的使用2.函数3.表达式4.数值计算和符号计算5.数据的表示6.程序设计-------------------------- ...

  6. oracle删除users表空间

    1.users表空间一般情况下是默认的,需将别的空间设置成默认,再删除users表空间(oracle不允许删除默认空间的). 2.删除表空间的同时会报这样的错:ORA-22868错误.原因:推断应该存 ...

  7. sga_target大于sga_max_size数据库无法启动

    环境:oracle 11g 单机 操作过程:由于修改SGA的大小,只修sga_max_size,没有修改sga_target,改导sga_max_size大于sga_target的大小,使得数据库无法 ...

  8. VS2010中没有ado.net entity data model实体数据模型这一选项-解决办法

    前提先安装VS2010 SP1包. 解决办法: 1.从VS2010的安装盘目录下面的WCU\EFTools找到ADONETEntityFrameworkTools_chs.msi和ADONETEnti ...

  9. UML大战需求分析阅读笔记2

    全面深入理解客户的业务,才能帮助我们准确的把握客户的需要.而在理解客户业务的同时,我们往往需要做业务流程再造(BPR:Business Process Reengineering)的工作.BPR简单说 ...

  10. android_demo之自动生成动态表格

    今天我们学习了如何更好的利用Android 的 layout 布局. 接下来是个简单的栗子去了解这个自动生成的动态的控件(自动生成表格) 这是我们的layout 页面 <?xml version ...