Data-* attribute usage

data-* Attribute usage

data-* Attributes are global attributes , Is a class called Custom data properties Properties of , It can make us in all html The ability to embed custom data attributes on elements , And through the script HTML and DOM Realize proprietary data exchange between .
Such as ：<p class="test" data-name=" Zhang San " data-age="25"></p>

data-* Of * Can be named as you like , But the following must be observed Naming rules ：
1、 Can't use xml start , Whether it's uppercase or lowercase
2、 The name cannot contain any semicolons
3、 Can not contain A-Z Capital

obtain data-* The method of value

Method 1 ：

document.getElementsByClassName("test")[0].dataset;  //  Will return to all data-* The value of the json object 

Method 2 ：

document.getElementsByClassName("test")[0].getAttribute("data-name");  //  Will return to all data-name Value , It can also be passed setAttribute To set its value 

stay css Can be accessed through the following methods ：

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