js中设置元素class的三种方法小结

转载 2016年08月30日 13:23:35

 一、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

首先先来一个兼容性的版本 判断元素是否有某个class function hasClass( elements,cName ){ return !!elements.cla...
  • qq_30100043
  • qq_30100043
  • 2017年03月29日 11:14
  • 5448

js 给某个div增加class 样式(三种方式)

js 给某个div增加class 样式(三种方式)
  • yan791124465
  • yan791124465
  • 2017年05月03日 15:06
  • 2380

用原生js实现addClass,removeClass,hasClass方法

其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断。 classList属性的方法有: add(value) 添加类名,如果...
  • u010582082
  • u010582082
  • 2017年04月18日 13:24
  • 3388

js 添加删除替换class 类

//删除类 //添加类 //替换类
  • gh1205
  • gh1205
  • 2016年07月27日 16:26
  • 5744

js添加样式class

最近在看js,好好打基础才是王道,底层的东西不容忽视。 Js添加样式名,在用jQuery的时候很容易的一个add和remove就能解决的问题,但是用js该怎么样处理呢,刚看了一篇文章,菜鸟级的《Ja...
  • u012193330
  • u012193330
  • 2015年05月20日 20:35
  • 1630

js修改html中class属性

用到js修改html的class属性值,归纳总结下: 一、获取class属性值 var value = $("div").attr("class"); //这里获取class属性值 var arra...
  • u010393758
  • u010393758
  • 2016年10月22日 01:05
  • 15992

js 封装获取class的值、添加class、删除class

在base.js文件的基础上 继续封装 js 封装获取class  * 1.调整封装  * 2.设置获取innerHTML里面的值  * 3.设置获取CSS样式并且设置  * 4.获取某个元素...
  • csdn_chenli
  • csdn_chenli
  • 2016年10月12日 11:10
  • 3080

原生JS添加删除Class

function hasClass(obj, cls) { return obj.className.match(new RegExp(‘(\s|^)’ + cls + ‘(\s|$)’))...
  • z852064121
  • z852064121
  • 2017年06月05日 21:49
  • 259

原生js实现class的添加和删除

function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" ...
  • fanhaiwang520
  • fanhaiwang520
  • 2014年03月24日 16:06
  • 18626

JS添加或修改控件的样式(Class)

使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改。 1 2 3 4 5 6 7 8 9...
  • shangzhiliang_2008
  • shangzhiliang_2008
  • 2015年03月17日 09:54
  • 9973
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中设置元素class的三种方法小结
举报原因:
原因补充:

(最多只允许输入30个字)