原生JS实现hasClass、addClass与removeClass方法详解
作者:小圆点时间:2026-10-30 14:16:50浏览:502
本文详细介绍如何使用原生JavaScript封装常用的jQuery类操作方法,包括判断元素是否包含指定class、添加class以及移除class。代码兼容支持classList的现代浏览器与旧版IE,通过RegExp正则匹配实现兼容处理,帮助开发者在无jQuery环境下高效操作DOM样式。
原生JS封装jQuery类方法概述
本文旨在记录并分享使用原生JavaScript封装的常用jQuery方法,以便在无需依赖jQuery库的情况下进行DOM操作。
判断元素是否包含class
首先介绍判断元素是否包含指定class的方法。该功能对应jQuery中的hasClass,用于检测目标元素是否拥有特定的CSS类名。
function hasClass(ele, cls) {
if (!ele || !cls) return false;
if (ele.classList) {
return ele.classList.contains(cls);
} else {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
}
向元素添加class
其次介绍添加class的方法。该功能对应jQuery中的addClass,用于向目标元素追加指定的CSS类名,若元素已存在该类名则不做重复添加。
function addClass(ele, cls) {
if (ele.classList) {
ele.classList.add(cls);
} else {
if (!hasClass(ele, cls)) ele.className += '' + cls;
}
}
从元素移除class
最后介绍移除class的方法。该功能对应jQuery中的removeClass,用于从目标元素中移除指定的CSS类名,确保元素不再应用该类的样式规则。
function removeClass(ele, cls) {
if (ele.classList) {
ele.classList.remove(cls);
} else {
ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
以上即为原生JavaScript封装的几个核心jQuery类操作方法的全部内容。这些封装方法提供了简洁的API,有助于提升开发效率,希望能为读者在实际项目中提供实用参考。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
