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");

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

巴特西

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

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

HTML部分

JS部分方案一（原生js）：

方案2 (H5新特性) ：

最新文章

热门文章

巴特西

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

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

HTML部分

JS部分 方案一（原生js）：

方案2 (H5新特性) ：

最新文章

热门文章

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

JS部分方案一（原生js）：