JS-自定义属性

共计 775 个字符，预计需要花费 2 分钟才能阅读完成。

自定义属性的目的是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

H5规定自定义属性 data- 开头作为属性名并且赋值

    <div data-index="1"> </div>
    // 或者用JS设置
    element.setAttribute('data-index', 1)

获取属性值

    // 获取自带的属性
    element.属性 
    box.class
    // 获取自定义的属性
    element.getAttribute('属性')
    box.getAttribute('data-index')

区别

element.属性 获取内置属性值（元素本身自带的属性）

element.getAttribute('属性') 主要获取自定义的属性（标准）我们自定义的属性

修改属性值

    // 修改自带的属性
    element.属性 = '值'
    box.id = 'test'
    // 修改自定义的属性
    element.setAttribute('属性', '值')
    box.setAttribute('data-index', '1')

区别

element.属性 = '值' 设置内置属性值（元素本身自带的属性）

element.setAttribute('属性', '值') 主要设置自定义的属性（标准）我们自定义的属性

移除属性

    element.removeAttribute('属性')

H5新增获取自定义属性方法

他只能获取 data- 开头的

dataset 是一个集合里面存放了所有以data开头的自定义属性

    // 获取自定义属性 data- 开头的集合
    box.dataset

    // 两种获取方式
    // 获取自定义属性 data-index
    box.dataset.index
    box.dataset['index']

    // 如果自定义属性里面有多个 - 链接的单词，获取的时候采取驼峰命名法
    box.dataset.listName
    box.dataset['listName']