js之自定义属性以及H5中如何判断自定义属性

目录

获取属性值

设置属性值

移除属性

怎样判断一个属性是自定义属性还是内置属性

---

自定义属性就是我们自己添加的属性,目的保存并使用一些数据，有些数据可以保存到页面 而不用保存到数据库。

获取属性值

  <div id="demo" index="1" class="name"></div>

1.div.id

2.element.getAttribute('属性')

区别是第一种只能获得元素内置的属性值，第二种可以获得我们自己定义的属性值，index就是我们自己定义的。

如果用div.index则显示undefined。

设置属性值

element.setAttribute('属性名','属性值')

div.setAttribute('index','2')

内置属性可以直接div.className = 'age';也可以div.setAttribute('class','age')。

移除属性

element.removeAttribute('index')

怎样判断一个属性是自定义属性还是内置属性

H5新增自定义属性以data-开头作为属性名并赋值,例如data-index

获取H5新增自定义属性element.dataset.index或者element.dataset['index']，dataset相当于一个集合存放了所有以data-开头的自定义属性。

注意如果自定义的属性有多个短线相连，比如data-index-name，获取的时候要遵循驼峰命名法，element.dataset-indexName。