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.

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

 <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>

About data-Attribute selector

All to select elements:

//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:

 <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>

Html5 free video tutorial

Detailed explanation of event attributes of H5

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

H5 Make a code demonstration of a timer

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!