js 控制 class 类名(classList) 和 自定义属性(dataset)

classList

用法：

const div = document.querySelector('div')

div.classList.add('myclass')
// 添加类名

div.classList.remove('myclass')
// 移除类名

div.classList.replace('myclass','myclass2')
// 替换类名，注意只能一个替换一个

div.classList.toggle('myclass')
// 切换类名，有这个类名就移除它，没有就添加

 

dataset

用法：

// H5 里面规定了自定义属性的书写，要求以 data- 开头

<div data-myvalue='这是我自定义属性的值'></div>

const div = document.querySelector('div')

console.log(div.dataset.myvalue)

div.dataset.name = 'kiss'
// <div data-name='kiss'></div> 

// 如果在设置的时候写成驼峰形式，会被转成用 '-' 连接的
// 获取的时候如果是多个 '-' 连接的，获取的时候要用驼峰获取
div.dataset.userName = 'kiss'
// <div data-user-name='kiss'></div>