直接撸代码 全靠死记硬背 没什么技术点
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");
结语：以上就是今天要分享的了。