封裝CSS的添加和刪除 是網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)中必備的技能之一。在實(shí)際開(kāi)發(fā)中，我們通常需要在CSS中添加和刪除某些樣式。這個(gè)過(guò)程看似簡(jiǎn)單，但如果不得當(dāng)?shù)夭僮鳎瑫?huì)造成網(wǎng)頁(yè)結(jié)構(gòu)混亂，甚至導(dǎo)致頁(yè)面無(wú)法顯示。因此，封裝添加和刪除CSS的方法是非常必要和值得掌握的。

/* 封裝添加CSS樣式的函數(shù) */
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
/* 封裝刪除CSS樣式的函數(shù) */
function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(
new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),
' '
);
}
}

在這段代碼中，我們定義了兩個(gè)函數(shù)：addClass和removeClass。這兩個(gè)函數(shù)分別用于向CSS樣式表中添加和刪除指定的CSS樣式類(lèi)。其中，addClass()函數(shù)的第一個(gè)參數(shù)是要添加CSS樣式的元素，而第二個(gè)參數(shù)是要添加的CSS類(lèi)名。removeClass()函數(shù)同樣需要傳遞兩個(gè)參數(shù)，分別是要?jiǎng)h除CSS樣式的元素和要?jiǎng)h除的CSS類(lèi)名。

這兩個(gè)函數(shù)分別需要判斷元素是否支持classList屬性。如果元素支持classList屬性，則直接調(diào)用add()和remove()方法即可。否則，我們需要手動(dòng)通過(guò)正則表達(dá)式來(lái)進(jìn)行添加和刪除操作。

上面的代碼可以應(yīng)用于很多不同的場(chǎng)景。比如，我們可以使用它來(lái)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)中的導(dǎo)航欄效果：根據(jù)屏幕寬度的不同，動(dòng)態(tài)地添加和刪除CSS樣式來(lái)控制導(dǎo)航菜單的顯示和隱藏。