【趣味JavaScript】利用className原生自定义封装实现快速操作html元素中的class属性!

2023-07-14 08:51 作者:极客小俊GeekerJun 0人读过 | 我要投稿

「📖 作者：极客小俊」
「💡 把逻辑思维转变为代码的技术博主」

我们可以使用className属性来实现对class类的设置,或者封装一些小函数

自定义一个hasClass函数

为了添加的class类不重复，所以我们在添加class类之前也应该判断一下当前元素是否已经存在了要添加的class类名称，所以这里我们可以封装一个hasClass()函数来实现这个查询是否存在的功能

代码如下

/**
* @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函数

我们可以封装一个addClass()函数来为元素添加css中的class类

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

自定义一个removeClass函数

我们也可以封装一个removeClass()方法来删除指定的class类

代码如下

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

自定义一个toggleClass函数

我们可以基于 addClass()方法 、hasClass()方法、removeClass()方法 这三个方法创建一个toggleClass()的方法 用于切换一个元素的class名 这样非常方便!

巴拉巴拉巴拉....😝😝😝

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

把这些函数全部放到一个单独的js文件当中，使用时，引入一下就可以了!