原生JavaScript实现class的添加与删除
作者:页面旅途时间:2026-10-30 10:19:08浏览:501
本文介绍如何使用原生JavaScript通过操作className属性来实现CSS类的添加、删除及存在性判断。核心逻辑利用正则表达式匹配类名边界,避免部分匹配错误。代码包含hasClass、addClass和removeClass三个基础函数,适用于不支持classList的旧版浏览器或特定封装场景。
原生JavaScript类名操作实现
以下是具体的实现代码示例:
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
};
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
};
function removeClass( elements,cName ){
if( hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
};
};
上述内容展示了利用原生JavaScript进行类名管理的完整方法,旨在为开发者提供实用的参考方案。
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
