html自定义属性
2019-07-06 本文已影响0人
请叫我刚爷
在实际项目中用到了easyUI的框架，时对其中的data-options属性产生了好奇，
image.png
百度一了一下，原来HTML可以自定义属性。但能力有限easyui对data-options的应用，并未读懂代码。
其实实际上上就是data-前缀加上自定义的属性名.
1、当做css选择器使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="test" data-test = "123" ></div>
</body>
<style>
[data-test]{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</html>
image.png
2、使用js添加属性
在上方代码基础上添加如下代码，即可添加一个新的属性
var test = document.getElementById('test');
test.dataset.my = '123456';
image.png
需要注意的是js添加的属性如果采用驼峰命名的方式需要注意
代码如下
var test = document.getElementById('test');
test.dataset.myDate = '20190619';
image.png
image.png
