Comment: HTML5 has added a new feature to custom data attributes, that is, data-* custom attributes. In HTML5, we can use the prefix with data- to set the custom properties we need to store some data
Of course, in advanced browsers, you can define and access data through scripts. Very useful in project practice.
For example:
Use the attribute method to access the value of the data-* custom attribute
It is very convenient to use the attributes method to access the value of the data-* custom attribute:
// Use getAttribute to get data- attribute
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // userName = 'Script House'
var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'
// Use setAttribute to set data-properties
user . setAttribute ( 'data-site' , 'http://www.vevb.com' ) ;
This method works fine in all modern browsers, but it is not the custom data-* attribute of HTML 5 that is used for use, otherwise it will be no different from the custom attributes we used before, for example:
<div id = "user" uid = "12345" uname = "Script House" > </div>
<script>
// Use getAttribute to get data- attribute
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'uname' ) ; // userName = 'Script House'
var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345'
// Use setAttribute to set data-properties
user . setAttribute ( 'site' , 'http://www.vevb.com' ) ;
</script>
This "original" custom attribute is no different from the above data-* custom attribute, and the knowledge attribute names are different.
Dataset attribute accesses the value of data-* custom attribute
This way, accesses the dataset attribute value of a data-* custom attribute by accessing the dataset attribute of an element. This dataset property is part of the HTML5 JavaScript API and is used to return a DOMStringMap object with all selected element data- attributes.
When using this method, instead of using the complete attribute name, such as data-uid, the data- prefix should be removed.
Another special note is: if the data- attribute name contains hyphen, for example: data-date-of-birth, the hyphen will be removed and converted to camel-like naming. The previous attribute name should be converted: dateOfBirth.
<div data-id="1234567890" data-name="Script House" data-date-of-birth>Door</div>
<script type="text/javascript">
var el = document.querySelector('#user');
console.log(el.id); // 'user'
console.log(el.dataset);//A DOMStringMap
console.log(el.dataset.id); // '1234567890'
console.log(el.dataset.name); // 'Script House'
console.log(el.dataset.dateOfBirth); // ''
el.dataset.dateOfBirth = '1985-01-05'; // Set the value of data-date-of-birth.
console.log('someDataAttr' in el.dataset);//false
el.dataset.someDataAttr = 'mydata';
console.log('someDataAttr' in el.dataset);//true
</script>
If you want to delete a data-property, you can do this: delete el . dataset . id ; or el .dataset . id = null ; .
It looks beautiful, haha, but unfortunately, the new dataset attribute is only implemented in Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ browsers, so the best use getAttribute and setAttribute to operate during this period.
About data-property selector
In actual development, you may find it useful, you can select related elements based on your custom data- attribute. For example, use querySelectorAll to select elements:
// Select all elements containing the 'data-flowering' attribute
document . querySelectorAll ( '[data-flowering]' ) ;
// Select all elements with the 'data-text-colour' attribute value red
document . querySelectorAll ( '[data-text-colour="red"]' ) ;
Similarly, we can also set CSS styles for the corresponding elements through the data- attribute value, such as the following example:
<style type ="text/css">
.user {
width : 256px ;
height : 200px ;
}
.user[data-name='feiwen'] {
color : brown
}
.user[data-name='css'] {
color : red
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > Pier</div>