开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

操作元素属性

对于操作元素的原生属性，一般都可以直接通过id来获取(这个属性要在标签中)，所以这个部分对我们做这个选项卡有用的就是自定义属性。

操作自定义属性的两种方法

第一种 setAttribute

这种可以支持我们随便编写自定义属性，可以直接写在标签中，也可以使用.setAttribute方法来添加。通过.getAttribute方法来查找到标签中的自定义属性。最后还有一个.removeArrtibute方法来删除我们写的自定义属性

第二种 dataset

这是一个HTML5的新约定
这里的写的自定义属性，是自己为这个标签设置的属性名，并不是说要写中文
id.dataset.自定义属性='属性值' 创建
console.log(id.dataset) 查看
delete id.dataset.自定义属性 删除

操作元素类名

操作元素类名顾名思义就是通过js中的方法实现我们对一些元素类名的改变，接下来我们就来看这两种方法

操作元素类名的两种方法

className

box.className='item1 item2 item3'
看这一句代码的意思就是我们给id名为box的标签添加了item1、item2、item3三个类名
box.className='item1 item2
如果我们又在下面添加了这么一句代码，那会有什么改变呢？结果就是这个标签他少了item3这个类名
这就是className的灵活性，它可以一次性完成增加修改删除。但是他也有不好的地方，我们在写代码时一不小心将两个类名写成一样的，他不会甄别是否对错就只会照搬到我们的标签中。

classList

下面来说说我们的classList classList不会犯className的错误，如果你添加了相同的类名，会自动去重不重复添加
box.classList.add('item3')//添加 //为我们id名为box的标签添加一个名为item3的类 box.classList.remove('item2')// 删除 //为我们id名为box的标签删除名为item2的类

    // toggle 切换
    btn.onclick=function(){
        box.classList.toggle('item1')

    }

toggle-切换多用于单击事件
当你的元素已经有这个类名时，单击移除
当没有时，单击添加

JS基础操作元素属性，元素类名