欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

前言

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

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

現(xiàn)代瀏覽器

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

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可以通過(guò)第三方庫(kù)來(lái)支持該方法。瀏覽器支持情況，可以查閱MDN鏈接。

通用跨瀏覽器解決方案

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

改變?cè)氐乃衏lass

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

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

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

為元素添加額外一個(gè)class

要在不刪除/影響現(xiàn)有值的情況下向元素添加類，請(qǐng)?zhí)砑涌崭窈托骂惷缦滤荆?/p>

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

從元素中刪除class

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

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

檢查元素是否存在某個(gè)class

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

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

Javascript框架或插件

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

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

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

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

（注意，$ 這里是jQuery對(duì)象。）

使用jQuery來(lái)操作元素class

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

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