你真的了解data-*吗

发布时间:2019-02-22 作者:一点通


data-*作为一个HTML5的自定义属性,主要是用来规范和管理用户自定义属性的。使用方式如下:

<div id="main" data-tip="test">test</div>

如上,data-tip="test"便是一个自定义属性。

注意,该名称需要遵循下面的规则:

  • 1、不能以xml开头
  • 2、不能包含分号
  • 3、不能包含AZ的大写字母

然后就可以通过HTMLElement.dataset来使用了

var main = document.getElementById('main')
let tip = main.dataset.tip

当然也可以设置和修改值

main.dataset.tip = 'hello'

使用dataset来操作data-*时需要注意下面两点

  • 1、dataset后面跟的是data-后面的字符串,是dataset.tip不是dataset.data-tip
  • 2、如果属性名称中还包含-,则需要转成驼峰命名的方式,如data-tip-colordataset-tipColor

或者,如果你在使用jQuery的话,也可以这样获取

$('#main').attr('data-tip')

或者(jQuery >= 1.4.3)

$('#main').data('tip')

其次也可以用在CSSattr()中(其实任何属性都可以)

p:before{
    content: attr(data-tip)
}

注意,dataset的兼容性不太好,目前只支持IE11+,不过移动端可以放心使用