data-*属性用法

data-*属性用法

data-*属性是全局属性，是一类被称为自定义数据属性的属性，它能让我们在所有html元素上嵌入自定义数据属性的能力，并且通过脚本在HTML和DOM之间实现专有数据交换。
如：<p class="test" data-name="张三" data-age="25"></p>

data-*的 *可以任意命名，但必须遵循以下命名规则：
1、不能以xml开头，无论是大写还是小写
2、名称不能包含任何分号
3、不能包含A-Z大写字母

获取data-*值的方法

方法一：

document.getElementsByClassName("test")[0].dataset;  // 会返回所有的data-*的值的json对象

方法二：

document.getElementsByClassName("test")[0].getAttribute("data-name");  // 会返回所有的data-name的值,同样也可以通过setAttribute去设置它的值

在css中可以通过下面方法访问：

.test[data-name="张三"] {
    
	font-size: 100px;
}