原生js添加類名詳解

在web開發中，我們會經常用到給HTML元素添加類名的操作。原生的js提供了幾種方法可以完成該操作，本文將從多個角度詳細講解每種方法的用法和優缺點。

一、原生js添加類名的方法

原生js提供了以下幾種方法用於向HTML元素添加類名：

• element.className
• element.classList.add()
• element.classList.toggle()
• element.classList.remove()

接下來，我們將逐一講解每種方法的用法和優缺點。

二、element.className

element.className 是原生js添加類名的最基礎方法。它允許你向元素的classed屬性添加一個或多個類名。

以下是通過element.className向元素添加類名的示例代碼：

  
    var element = document.getElementById('myElement');
    element.className += ' myClass';
  

上述代碼將向id為 “myElement” 的元素添加 “myClass” 這個類名。需要注意的是，className屬性只能替換元素的全部類名，而無法只替換其中的某個類名。

當需要替換一個元素中的一個類名時，需要先通過 String 對象的 replace() 方法將原來的類名替換成新的類名。代碼示例如下：

  
    var element = document.getElementById('myElement');
    element.className = element.className.replace('oldClass', 'newClass');
  

上述代碼將替換 “myElement” 元素的 “oldClass” 類名為 “newClass” 類名。

雖然 element.className 是原生js添加類名的基礎方法，但是由於它只能替換元素的全部類名且語義化差，使用時應盡量避免。

三、element.classList.add()

element.classList.add() 方法可以向 HTML 元素的 class 屬性中添加一個或多個類名。

以下是通過element.classList.add()向元素添加類名的示例代碼：

  
    var element = document.getElementById('myElement');
    element.classList.add('myClass');
  

上述代碼將向id為 “myElement” 的元素添加 “myClass” 這個類名。注意，element.classList.add() 方法可以在元素中添加多個類名，可以將多個類名通過逗號分隔的形式添加到該方法中。

另外，element.classList.add() 方法還可以接受多個參數，每個參數都代表一個要添加的類名。代碼示例如下：

  
    var element = document.getElementById('myElement');
    element.classList.add('myClass1', 'myClass2', 'myClass3');
  

上述代碼將向id為 “myElement” 的元素分別添加 “myClass1″、”myClass2″、”myClass3” 這三個類名。

四、element.classList.toggle()

通過 element.classList.toggle() 方法可以為 HTML 元素的 class 屬性添加或刪除一個或多個類名。

以下是通過element.classList.toggle() 向元素添加或刪除類名的示例代碼：

  
    var element = document.getElementById('myElement');
    element.classList.toggle('myClass');
  

上述代碼將判斷id為 “myElement” 的元素是否包含 “myClass” 這個類名，如果元素沒有這個類名，就將這個類名添加到元素的class屬性中，如果元素已經存在這個類名，就將這個類名從元素的class屬性中移除。

另外，element.classList.toggle() 方法還可以接受第二個參數用於指定是否應該添加或移除類名，代碼示例如下：

  
    var element = document.getElementById('myElement');
    element.classList.toggle('myClass', true); // 添加類名
    element.classList.toggle('myClass', false); // 移除類名
  

五、element.classList.remove()

通過 element.classList.remove() 方法可以從 HTML 元素的 class 屬性中刪除一個或多個類名。

以下是通過element.classList.remove() 從元素中刪除類名的示例代碼：

  
    var element = document.getElementById('myElement');
    element.classList.remove('myClass');
  

上述代碼將從id為 “myElement” 的元素的 class 屬性中移除 “myClass” 這個類名。

與 element.classList.add() 方法一樣，element.classList.remove() 也可以接受多個參數，每個參數代表一個要從 HTML 元素的 class 屬性中移除的類名。代碼示例如下：

  
    var element = document.getElementById('myElement');
    element.classList.remove('myClass1', 'myClass2', 'myClass3');
  

上述代碼將從id為 “myElement” 的元素的 class 屬性中移除 “myClass1″、”myClass2″、”myClass3” 這三個類名。

六、總結

以上就是常用的四種原生js添加類名的方法，除了使用 element.className 的兼容性好一些外，其餘三種方法均已得到廣泛應用。

在實際開發中，建議首先選擇使用 element.classList.add() 方法，盡量避免使用 element.className 和 element.classList.remove() 方法。當需要在添加或刪除類名時進行判斷時，可以使用 element.classList.toggle() 方法。