H5新特性实现对class的增删改

直接撸代码 全靠死记硬背 没什么技术点

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部分 方案一（原生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);

方案2 (H5新特性) ：

contains(value) 判断名为value的类名是否存在
add(value) 添加名为value的类名
remove(value) 删除名为value的类名
toggle(value) 如果名为value的类名存在则删除，不存在则添加

// 代码如下：
// 获取节点
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");

结语：以上就是今天要分享的了。

posted @ 2018-10-31 17:16  会写代码的赖先生  阅读(371)  评论(0)  编辑  收藏  举报