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