classList | 原生js/javascript 操作类名

用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>