classList | 原生js/javascript 操作类名

作者猫斯基 2022-11-23 295 人读过

最新文章

用jQuery 习惯了,都不会用原生js操作了。特此记下。

本文介绍了用原生js来操作类名,有添加类名、删除类名、判断类名是否存在、替换类名等。此外,猫斯基还写了个例子。

// 添加类名
classList.add('maosiji-com');

// 删除类名
classList.remove('maosiji-com');

// 判断是否包含类名,返回值 true/false
classList.contain('maosiji-com');

// 若对象上没有此类名,则添加;若对象上有此类名,则删除
classList.toggle('maosiji-com');

// 替换类名
classList.replace( oldClassName, newClassName );

例子

<div id="maosiji" class="maosiji-com maosiji-com-remove maosiji-com-contain"></div>
let mao = document.getElementById('maosiji');
mao.classList.add('maosiji-com-add');
mao.classList.remove('maosiji-com-remove');
mao.classList.contain('maosiji-com-contain');
mao.classList.toggle('maosiji-com-toggle');
mao.classList.replace('maosiji-com', 'maosiji-com-replace');
<div id="maosiji" class="maosiji-com-replace maosiji-com-add maosiji-com-contain maosiji-com-toggle"></div>

本文由 猫斯基 原创发布。

著作权均归用户本人所有。独家文章转载,请联系本站管理员。获得授权后,须注明本文地址! 本文地址:https://maosiji.com/qianduan/js-classlist.html