Data-* Custom properties for HTML 5

HTML 5 Adds a new feature that is custom data properties, which data-* is custom properties. In HTML5 we can use data- a prefix to set the custom attributes we need to do some data storage. Of course, the advanced browser can be defined by scripting and data access. Very useful in project practice.

For example

 <div id = "user" UID = "12345" uname = "fool's Wharf" > </div><script>// use GetAttribute to get the data-property  var  user = Document. getElementById (' user '  var  userName = plant. GetAttribute (' uname '); //  UserName = ' fool's Wharf '  var  userId = plant. GetAttribute (' uid '); //  //  user. SetAttribute (' site ', ' http://www.css88.com '  </script> 

This "raw" custom attribute is no different from data-* The above custom attribute, and the knowledge attribute name is different.

DataSet property accesses the value of the data-* custom property

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

When using this method, you should remove data-uid data- The prefix instead of using the full property name, such as to access the data.

It is data- also important to note that if a property name contains a hyphen, data-date-of-birth For example, the hyphen is stripped and converted to a camel-named name, the preceding property name is converted to: dateOfBirth .

<div id= "user" data-id= "1234567890" Data-name= "Fool's Wharf" Data-date-of-birth> Pier </div><script type= "text/ JavaScript ">varel = Document.queryselector (' #user '); Console.log (el.id); //' user 'Console.log (El.dataset);//a DomstringmapConsole.log (el.dataset.id);//' 1234567890 'Console.log (El.dataset.name);//' fool's Wharf 'Console.log (El.dataset.dateOfBirth);//"'El.dataset.dateOfBirth = ' 1985-01-05 ';//sets the value of the Data-date-of-birth.Console.log (' somedataattr 'inchEl.dataset);//falseel.dataset.someDataAttr = ' MyData '; Console.log (' Somedataattr 'inchEl.dataset);//true</script>

If you want to delete one data-属性 , you can do this: delete el. DataSet. Id; Or an El DataSet.  id = null; 。

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

About the Data-property selector

You might find it useful when you are actually developing, and you can choose the relevant element based data- on your custom attributes. For example, use Queryselectorall to select elements:

// selects all elements containing the ' data-flowering ' attribute document. Queryselectorall (' [data-flowering] '//  Select all elements containing the ' Data-text-colour ' attribute value as red . Queryselectorall (' [data-text-colour= ' red '] ');

Similarly, we can also set data- CSS styles for the corresponding elements through property values, 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-i D = "124" data-name = "css" > Dock </div>

Reprint: http://www.css88.com/archives/4715

Data-* Custom properties for HTML 5