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

作者最新文章