data-* 自定义数据属性

data-* 作为一个 HTML5 的自定义数据属性,主要是用来规范和管理用户自定义属性的.

1.  使用方式如下:

<div id="demo" data-tip="提示"></div>

data-tip="提示" 便是一个自定义属性。

使用该属性,名称需要遵循下面的规则:

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

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

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

设置和修改值

demo.dataset.tip = '提示2'

伪类里面也可以这样使用

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

猜你喜欢

转载自blog.csdn.net/jiandan1127/article/details/87776622
今日推荐