Of course, the advanced browser can define and access data through scripts. It is very useful in project practice.
For example:
The codes are as follows:
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 values of data-* custom attributes:
The codes are as follows:
var user = document . getElementById ( ‘user’ ) ;
var userName = plant . getAttribute ( ‘data-uname’ ) ; // userName = ‘developpaer’
var userId = plant . getAttribute ( ‘data-uid’ ) ; // userId = ‘12345’
//Use setAttribute to set data attribute
user . setAttribute ( ‘data-site’ , ‘https://www.jb51.net’ ) ;
This method can work normally in all modern browsers, but it is not the purpose for which the custom data-* attribute of HTML 5 is used. Otherwise, it is no different from the custom attribute we used before, for example:
The codes are as follows:
<script>
//Use getattribute to get data attribute
var user = document . getElementById ( ‘user’ ) ;
var userName = plant . getAttribute ( ‘uname’ ) ; // userName = ‘developpaer’
var userId = plant . getAttribute ( ‘uid’ ) ; // userId = ‘12345’
//Use setAttribute to set data attribute
user . setAttribute ( ‘site’ , ‘https://www.jb51.net’ ) ;
</script>
This “original” custom attribute is no different from the above data-* custom attribute. The name of the knowledge attribute is different.
The dataset property accesses the value of the data-* custom property
This method accesses the value of the data-* custom attribute by accessing the dataset attribute of an element. This dataset attribute is part of the HTML5 JavaScript API and is used to return a domstringmap object that selects the data attribute of all elements.
When using this method, instead of using complete attribute names, such as data uid, to access data, the data prefix should be removed.
Another special note: if the data attribute name contains hyphens, such as data date of birth, the hyphen will be removed and converted to a hump type name. The previous attribute name should be: dateofbirth after conversion.
The codes are as follows:
<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); // ‘developpaer’
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 attribute, you can do this: delete el dataset . id ; Or EL dataset . id = null ; 。
It looks beautiful, ha ha, 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 it is best to use getattribute and setAttribute to operate during this period.
About data attribute selectors
In actual development, you may find it very useful. You can select relevant elements according to the customized data attribute. For example, use queryselectorall to select elements:
The codes are as follows:
document . querySelectorAll ( ‘[data-flowering]’ ) ;
//Select all elements that contain a value of red for the’data text colour’attribute
document . querySelectorAll ( ‘[data-text-colour=”red”]’ ) ;
Similarly, we can set CSS styles for the corresponding elements through the data attribute value, for example, the following example:
The codes are as follows:
.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” > wharf </div>