22.自定义属性

目录

1  获取属性

2  设置属性

2.1  元素中设置属性

2.2  点设置属性

2.3  setAttribute()设置

3  移除属性 removeAttribute()

4  tab栏切换

5  H5自定义属性名称规范

---

1  获取属性

拿到元素对象后，我们可以通过点的方式拿到属性

我们也可以用.getAttribute('属性名')得到属性

我们用点的方式获取内置属性（点获取不了自定义属性），用getAttribute()获取自定义属性

2  设置属性

2.1  元素中设置属性

2.2  点设置属性

也可以用点进行设置

但是这种方式是没有办法设置自定义属性的

如果想设置自定义属性要使用setAttribute()

2.3  setAttribute()设置

第一个参数是属性，第二个参数是值

这样就可以成功设置了

3  移除属性 removeAttribute()

参数为属性名

进入chrome调试工具发现没有id与hahaha属性了

4  tab栏切换

我们用自定义属性做一个例子，当我点击商品介绍时，显示商品介绍的内容

当我点击规格与包装时，显示规格与包装的内容

其他两个也一样

CSS

HTML

JS

这里我们通过设置li的index属性得出点击的是第几个li，从而显示出第几个内容

5  H5自定义属性名称规范

我们做上个案例时可能会发现一个问题，如果自定义属性名为index，也可以用点进行调用，在H5中，我们规定自定义属性名的格式都为 data-属性名，比如data-index

调用，设置与移除都可以用之前自定义属性的方法

如果遵循H5自定义属性名，你可以从元素的dataset属性中获得自定义属性

• 这里的something是设置属性时候data-后面的字符

element.dataset中存放了以data-为前缀的所有自定义属性

在设置自定义属性名时，同样可以设置多个横杠的属性名，但你在用dataset获取的时候不能再使用相同的多横杠属性名，而是要用驼峰命名法（如果使用getAttribute()则没有影响）

所以最好不要这样做，可以用下划线或者直接使用驼峰命名法，保持设置于调用时候变量名一致