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

佚名 6年前 (2019-04-10) 随笔 1348人围观抢沙发百度已收录

classList

用法：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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>