1. 程式人生 > >H5新特性實現對class的增刪改

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

結語:以上就是今天要分享的了。