Detailed explanation of H5's custom attributes data-*-H5 Tutorial-php.cn

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' ) ;

Copy after login

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:

Copy after login

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 HTML5JavaScript APIand is used to return a DOMString Map## 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:

码头

Copy after login

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

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

码头

Copy after login

[Related recommendations]

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!