原生JavaScript实现class的添加与删除

作者:页面旅途

时间:2026-10-30

浏览:500

本文介绍如何使用原生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进行类名管理的完整方法,旨在为开发者提供实用的参考方案。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章