Detailed introduction to HTML5 custom attribute data-* and JS operation examples

Time:2022-6-5

Of course, the advanced browser can define and access data through scripts. It is very useful in project practice.

For example:

Copy code

The codes are as follows:

<div id = “user” data-uid = “12345” data-uname = “developpaer” > </div>

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:

Copy code

The codes are as follows:

//Use getattribute to get data attribute
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:

Copy code

The codes are as follows:

<div id = “user” uid = “12345” uname = “developpaer” > </div>
<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.

Copy code

The codes are as follows:

<div data id= “1234567890” data name= “developpaer” data date of birth> wharf </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); // ‘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:

Copy code

The codes are as follows:

//Select all elements that contain the’data-flowering’attribute
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:

Copy code

The codes are as follows:

<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” > wharf </div>

Recommended Today

Network counting experiment I Division VLAN

Experiment 1  vlanCreation and division of 1、 Experiment purpose: 1. Understand the working principle of VLAN; 2. Learn the method of dividing VLANs based on ports; 3. Understand the communication between the same VLANs across switches; 4. Further learn the configuration commands of switch ports. 2、 Experimental principle: VLAN (virtual local area network), that is, […]