HTML5 Custom Properties data-* Detailed introduction and JS Operation example

Of course, advanced browsers can be scripted for definition and data access. Very useful in project practice.

For example:

The

code is as follows: <div id = "user" Data-uid = "12345" data-uname = "Script House" > </div>

Using attribute methods to access the values of data-* custom properties

It is convenient to use the attributes method to access the values of data-* custom properties:

The

code is as follows:


//Use GetAttribute to get data-properties


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.jb51.net ');

This method works well in all modern browsers, but it is not a custom data-* attribute that is used for HTML 5, or it makes no difference to the custom properties we used previously, for example:

The
code is as follows:


<div id = "user" UID = "12345" uname = "Script House" > </div>


<script>


//Use GetAttribute to get data-properties


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.jb51.net ');


</script>

This "original" custom attribute is no different from the data-* custom attribute above, and the Knowledge property name is different.

DataSet property Access value of data-* custom property

This method accesses the value of the data-* custom property by accessing the DataSet property of an element. This dataset property is part of the HTML5 JavaScript API and is used to return a Domstringmap object that selects all data-attributes of the selected element.

When using this method, instead of using the full property name, such as Data-uid to access the data, the data-prefix should be removed.

One particular note is that the Data-property name if it contains hyphens, such as: Data-date-of-birth, the hyphen will be removed and converted to a hump-style name, and the preceding property name should be converted to: dateOfBirth.

The

code is as follows:


<div id= "user" data-id= "1234567890" data-name= "script House" data-date-of-birth> Dock </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); ' The Script house '


Console.log (El.dataset.dateOfBirth); // ''


El.dataset.dateOfBirth = ' 1985-01-05 '; Sets the value of the 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 so: delete el. DataSet. ID; Or El. DataSet. id = null;.

It looks beautiful, haha, but unfortunately, the new dataset attribute is only implemented in the Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ Browser, so the best GetAttribute and setattribute to operate.

About the Data-property selector

You may find it useful in actual development, and you can choose the relevant elements based on the custom data-properties. For example, use Queryselectorall to select elements:

The

code is as follows:


//Select all elements that contain the ' data-flowering ' attribute


document. Queryselectorall (' [data-flowering] ');





//Select all elements that contain a ' data-text-colour ' property value of red


document. Queryselectorall (' [data-text-colour= ' red] ');

Similarly, we can also set CSS styles for the corresponding elements by data-property values, such as the following example:

The
code is 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" > Dock </div>