H5新特性實現對class的增刪改
阿新 • • 發佈：2018-10-31
直接擼程式碼 全靠死記硬背 沒什麼技術點
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");
結語：以上就是今天要分享的了。