怎么使用HTML5的 classList API操作CSS類
作為前端工程師，我們經(jīng)常需要根據(jù)用戶與頁面上的元素的交互來更改CSS樣式。如果你接觸過 jQuery，相信對 hasClass(), addClass()，removeClass() 這些方法不陌生。
幸運的是，HTML5提供了一種原生的方式來實現(xiàn)這些效果，而不再需要jQuery。
目前主流瀏覽器均已支持 classList API，對于 IE 11之前的版本需要借助于兼容庫。
什么是classList API？
HTML5 classList API為我們提供了一種方法來獲取一個DOM元素的class屬性，并且可以使用JavaScript來修改它們。
在一個元素上查詢它的 classList屬性會返回一個DOMTokenList集合。它包含了應(yīng)用于當(dāng)前元素的所有類，以及l(fā)ength屬性，length屬性表示該元素上的類的數(shù)目。
我們看看這個例子:
在瀏覽器中執(zhí)行上述代碼，會看到如下輸出：
獲取一個元素所有的CSS類很簡單，但是不是特別有用，我們需要一種方式來管理和更新這些類。classList 提供了幾個方法來幫我們實現(xiàn)這些功能：
add()：增加指定的類
remove()：刪除指定的類
contains()：檢查指定的類是否存在于某個元素中
toggle()：切換指定的類
index()：返回列表中指定位置的類
length：返回類的數(shù)量
讓我們逐個了解一下。
增加類
為一個元素增加一個CSS類很簡單。只需要把類名作為參數(shù)傳遞到 add() 方法即可。注意如果此類名已經(jīng)存在于元素上，則不會再次添加。
要增加多個類，以多個參數(shù)形式傳值：
刪除類
要刪除一個類，你只需要把類名作為參數(shù)傳給 remove() 方法即可。如果類名不存在于classList中，則什么都不會發(fā)生。
要刪除多個類，以多個參數(shù)傳給 remove方法：
檢查一個類是否存在
使用 contains() 方法，可以可以檢查一個指定的類是否存在于元素的 classList 中，然后可以根據(jù)返回值執(zhí)行一些操作。
例如：
切換類名
根據(jù)用戶的行為來增加或者刪除一個類，這是一個常見的需求。在 classList API中提供了 toggle() 方法來實現(xiàn)這個功能。
檢查類的數(shù)量
想要知道有多個類應(yīng)用到了一個元素上，可以使用 length 屬性：
總結(jié)
如上所示，HTML5 的 classList 簡單易用。如果你的項目不需要兼容舊瀏覽器，可以根據(jù)項目實際情況直接使用 classList API提供的方法，可以簡化你的代碼。
我們從以下三個方面，對比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式，逐一展開分析。
用JS的正則表達式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編
css制作扇形
純CSS3文字Loading動畫特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補全并推斷值的類型。
PHP作為Web界第一大語言近年來熱度不夠，但是這幾年的進步和成長卻沒有中斷。在2022伊始，我們來一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。
Linux程序前臺后臺切換：在Linux終端運行命令的時候，在命令末尾加上 & 符號，就可以讓程序在后臺運行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達式支持 多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會導(dǎo)致 Python 不能正確使用多行模式。