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

时间:2021-12-12 08:06:41

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>