前言

js修改元素class可以說的上是老生常談的問題了，也經(jīng)常被認為是基礎(chǔ)中的基礎(chǔ)，甚至不是前端都可以寫出這個功能。

今天俺跟大家總結(jié)總結(jié)修改元素class的幾種實踐方法。

現(xiàn)代瀏覽器

現(xiàn)代瀏覽器classList優(yōu)化過，它提供了一些方法，并且不依賴任何框架和插件：

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');

不幸的是，在IE10之前的版本不支持該方法，IE8和IE9可以通過第三方庫來支持該方法。瀏覽器支持情況，可以查閱MDN鏈接。

通用跨瀏覽器解決方案

選擇元素的標(biāo)準(zhǔn)Javascript方法是使用document.getElementById（“Id”），下面為大家總結(jié)一些常見的操作方法。

改變元素的所有class

要使用一個或多個class替換掉顯有的class，可以這樣寫：

/**
 * 時間：2019年8月12日
 * 前端教程： https://www.pipipi.net/
 */
document.getElementById("MyElement").className = "MyClass";//單個class  
document.getElementById("MyElement").className = "MyClass1 MyClass2";//多個class

如果需要添加多個class可以以空格分隔。

為元素添加額外一個class

要在不刪除/影響現(xiàn)有值的情況下向元素添加類，請?zhí)砑涌崭窈托骂惷?，如下所示?/p>

/**
 * 時間：2019年8月12日
 * 前端教程： https://www.pipipi.net/
 */
document.getElementById("MyElement").className += " MyClass";

從元素中刪除class

要將單個類移除到元素而不影響其他可能的類，需要使用正則表達式替換：

/**
 * 時間：2019年8月12日
 * 前端教程： https://www.pipipi.net/
 */
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace( /(?:^|\s)MyClass(?!\S)/g , '' )

檢查元素是否存在某個class

上面用于刪除類的相同正則表達式也可用于檢查特定類是否存在：

/**
 * 時間：2019年8月12日
 * 前端教程： https://www.pipipi.net/
 */
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Javascript框架或插件

上面的代碼都是標(biāo)準(zhǔn)的Javascript，但通常的做法是使用framework或library 來簡化常見任務(wù)，以及解決編寫代碼時可能沒有想到的修復(fù)錯誤和邊緣情況。

雖然有些人認為添加一個大約50 KB的框架來簡單地改變一個類是不合適的，如果你正在做大量的Javascript工作，或者任何可能有不尋常的跨瀏覽器行為的東西，那么插件還是非常值得一試的。

（非常粗略地說，library 是為特定任務(wù)設(shè)計的一組工具，而framework 通常包含多個庫并執(zhí)行一整套職責(zé)。）

下面的示例展示了如何使用jQueyr，可能是最常用的Javascript庫（盡管還有其他值得研究的）。

（注意，$ 這里是jQuery對象。）

使用jQuery來操作元素class

使用jQuery可以明顯簡化我們的代碼，我們可以將下面的代碼與上面的代碼比較：

/**
 * 時間：2019年8月12日
 * 前端教程： https://www.pipipi.net/
 */
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )