原生js实现对class的增删改

在忙碌了一个星期之后，今天终于有了空闲时间，决定把这一周来遇到的问题和学习到的知识通过写博客的形式记录下来，一是为了加深印象，二是当一个记录，方便以后查看。本萌新还是只小猴子，本文有什么欠缺或者另有高见的，请指教。

现场还原

在h5混合开发APP的项目中，没有引用jQuery第三方js库，很多对节点的操作需要通过js原生来实现，对于一只刚进公司的菜鸟的我来说是一件头大的事情，T T，在看了网上一些方法之后，找到了一些比较好的方法。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现对类的增加、删除、修改</title>
</head>
<body>
    <div id="test" class="old-class"></div>
</body>
</html>

解决方案一

js代码

//获取节点和节点的class属性值
var $test = document.getElementById("test");
var test_class_name = $test.getAttribute("class");

//增加一个class
test_class_name = test_class_name.concat(" add-class");
$test.setAttribute("class",test_class_name );

//删除一个class
test_class_name = test_class_name.replace("old-class","");
$test.setAttribute("class",test_class_name );

//替换一个class
test_class_name = test_class_name.replace("old-class","new-class");
$test.setAttribute("class",test_class_name);

解决方案二

在查阅相关资料的过程中，发现HTML5中已经新加了classList属性，用于实现对class的操作，具体方法如下：

contains(value) 判断名为value的类名是否存在

add(value) 添加名为value的类名

remove(value) 删除名为value的类名

toggle(value) 如果名为value的类名存在则删除，不存在则添加

但是这种方法有以下几点缺陷：

没有可以直接替换类名的方法，需要通过变相实现，具体见下面js代码

兼容性问题，目前只有FireFox 3.6+和Chrome浏览器支持

js代码

//获取节点
var $test = document.getElementById("test");

//增加一个class
$test.classList.add("new-class");

//删除一个class
$test.classList.remove("old-class");

//toggle(value)方法，如果存在value这个类名就删除，如果不存在则添加
$test.classList.toggle("old-class");

//contains(value)方法，判断value这个类名是否存在，存在返回true，不存在返回false
$test.classList.contains("old-class");

//通过先删除old-class,然后添加new-class的方式，变相的实现替换class的目的
$test.classList.remove("old-class");
$test.classList.add("new-class");

原生js实现对class的增删改

现场还原

解决方案一

解决方案二

猜你喜欢