「?? 作者：極客小俊」
「?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

我們可以使用className屬性來實現(xiàn)對class類的設(shè)置,或者封裝一些小函數(shù)

自定義一個hasClass函數(shù)

為了添加的class類不重復(fù)，所以我們在添加class類之前也應(yīng)該判斷一下當前元素是否已經(jīng)存在了要添加的class類名稱，所以這里我們可以封裝一個hasClass()函數(shù)來實現(xiàn)這個查詢是否存在的功能

代碼如下

/**
* @param obj ? ? ? ?object
* @param ClassName ?string
* @return {boolean}
*/
function hasClass(obj, ClassName) {
? ?if (obj.className === obj.id) {
? ? ? ?console.log('class名稱和ID名稱同名了，建議修改');
? ? ? ?return;
? ?}
? ?var reg = new RegExp("\\b" + obj.className + "\\b");
? ?return reg.test(obj.className);
}

自定義一個addClass函數(shù)

我們可以封裝一個addClass()函數(shù)來為元素添加css中的class類

/**
* @param obj ? ? ? ?object
* @param ClassName ?string
*/
function addClass(obj, ClassName) {
? ?if (!hasClass(obj, ClassName)) {
? ? ? ?obj.className = ClassName;
? ?}
}

自定義一個removeClass函數(shù)

我們也可以封裝一個removeClass()方法來刪除指定的class類

代碼如下

/**
* @param obj
* @param ClassName
*/
function removeClass(obj, ClassName) {
? ?if (hasClass(obj, ClassName)) {
? ? ? ?obj.attributes.removeNamedItem('class');
? ?}
}

自定義一個toggleClass函數(shù)

我們可以基于 addClass()方法 、hasClass()方法、removeClass()方法 這三個方法創(chuàng)建一個toggleClass()的方法 用于切換一個元素的class名 這樣非常方便! ?

巴拉巴拉巴拉....??????

/**
* @param obj ? ? ? ?object
* @param ClassName ?string
*/
function toggleClass(obj, ClassName) {
? ?if (hasClass(obj, ClassName)) {
? ? ? ?removeClass(obj, ClassName);
? ?} else {
? ? ? ?addClass(obj, ClassName);
? ?}
}

把這些函數(shù)全部放到一個單獨的js文件當中，使用時，引入一下就可以了!

舉個梨子

大家的支持就是我堅持的動力!

如果文章對你有幫助的話就請

??點贊 ??評論 ??收藏

一鍵三連哦！

??????????

如果以上內(nèi)容有任何錯誤或者不準確的地方，????歡迎在下面 ?? 留個言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)????????????