分別使用原生js和jQuery添加/刪除元素的class屬性

一、原生js添加/刪除元素的class屬性：

<!-- span元素原有class = "test" -->
<span class="test"></span>

// 獲取元素 var ele = document.getElementsByClassName("abc"); 
 // 方法1：直接賦值，會覆蓋原有的值 ele.className = "test1";
 <!-- class原本屬性值test被test1覆蓋 -->
<span class="test1"></span>


// 方法2：利用className為字符串的屬性，可在原有class屬性值后面添加或刪除新的值 ele.className += " test2";
 <!-- 添加class屬性值test2 -->
<span class="test1 test2"></span>


// 方法3：利用classList屬性的add()、remove()方法添加或刪除屬性值 ele.classList.add("test3");
 <!-- 添加class屬性值test3 -->
<span class="test1 test2 test3"></span>

 

二、jQuery添加/刪除元素的屬性

<!-- span元素原有class = "test" -->
<span class="test"></span>


// addClass() 添加類屬性值test1、test2
$("span").addClass("test1 test2");


// removeClass() 刪除類屬性值
$("span").removeClass("test");


// toggleClass("demo1")  切換類屬性值（有/無），常用於事件觸發，觸發一次添加屬性值，再觸發一次刪除屬性值
$("span").toggleClass("test3");