Detailed explanation of H5's custom attributes data-*

HTML5 adds a new feature called custom data attributes, which are data-* custom attributes. In HTML5, we can use data- as the prefix to set the custom attributes we need to store some data

Of course, advanced browsers can define and access data through scripts. Very useful in project practice.

For example:

The code is as follows:

Use the attribute method to access data-* the value of a custom attribute

It is very convenient to use the attributes method to access the value of data-* custom attributes:

The code is as follows:

// 使用getAttribute获取 data- 属性

  var user =
document
 . getElementById ( 'user' ) ;

  var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '脚本之家'

  var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'

  // 使用
set
Attribute设置 data- 属性

  user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

This method can work normally in all modern browsers, but it is not the purpose of HTML 5's custom data-* attributes, otherwise it will be no different from the custom attributes we used before, for example:

The code is as follows:

<p id = "user" uid = "12345" uname = "脚本之家" > </p>

 <script>

 // 使用getAttribute获取 data- 属性

 var user = document . getElementById ( &#39;user&#39; ) ;

 var userName = plant . getAttribute ( &#39;uname&#39; ) ; // userName = &#39;脚本之家&#39;

 var userId = plant . getAttribute ( &#39;uid&#39; ) ; // userId = &#39;12345&#39;

 // 使用setAttribute设置 data- 属性

 user . setAttribute ( &#39;site&#39; , &#39;http://www.jb51.net&#39; ) ;

 </script>

This "original" custom attribute is no different from the data-* custom attribute above, but the knowledge attribute name is different.

dataset attribute accesses the value of data-* custom attribute

This method accesses the data-* custom attribute by accessing the dataset attribute of an element. value. This dataset attribute is part of HTML5 JavaScript API and is used to return a DOMStringMap## of the data- attribute of all selected elements. #Object.

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

Another special note is: If the data- attribute name contains hyphens, for example: data-

date-of-birth, the hyphens will be removed and converted to camel case Formula naming, the previous attribute name should be: dateOfBirth after conversion.

The code is as follows:

<p id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</p>
 <script type="text/javascript">
 var el = document.querySelector(&#39;#user&#39;);
 console.log(el.id); // &#39;user&#39;
 console.log(el.dataset);//一个DOMStringMap
 console.log(el.dataset.id); // &#39;1234567890&#39;
 console.log(el.dataset.name); // &#39;脚本之家&#39;
 console.log(el.dataset.dateOfBirth); // &#39;&#39;
 el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.
 console.log(&#39;someDataAttr&#39; in el.dataset);//false
 el.dataset.someDataAttr = &#39;mydata&#39;;
 console.log(&#39;someDataAttr&#39; 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 ; .

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+ browser , so it is best to use getAttribute and setAttribute to operate during this period.

About data-Attribute selector

In actual development, you may find it useful, you can customize the data based on - Attribute selection related elements. For example, use querySelector

All to select elements:

The code is as follows:

//Select all elements containing the 'data-flowering' attribute
document . querySelectorAll ( '[data-flowering]' ) ;

//Select all elements containing the 'data-text-colour' attribute value of red
document . querySelectorAll ( '[data-text-colour="red"]' ) ;

Similarly, we can also set CSS styles for corresponding elements through the data- attribute value, such as the following example:

The code is as follows:

<style type ="text/css">

  .user {


width
 : 256px ;


height
 : 200px ;

  }

  .user[data-name=&#39;feiwen&#39;] {

  color : brown

  }

  .user[data-name=&#39;css&#39;] {

  color : red

  }

  </style>

  <p
class
 = "user" data-id = "123" data-name = "feiwen" > 1 </p>

  <p class = "user" data-id = "124" data-name = "css" > 码头 </p>

[Related recommendations]

1.

Html5 free video tutorial

2.

Detailed explanation of event attributes of H5

3.

Detailed explanation of H5 28 very important new features, new tricks and new technologies

4.

H5 Make a code demonstration of a timer

5.

H5 Detailed explanation of examples of completing multiple image uploads

The above is the detailed content of Detailed explanation of H5's custom attributes data-*. For more information, please follow other related articles on the PHP Chinese website!