Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "H5 custom attributes data-* example analysis", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "H5 custom attributes data-* sample analysis" this article.

A new feature added to HTML5 is custom data properties, that is, data-* custom properties. 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. It is very useful in project practice.

For example:

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

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

/ / use getAttribute to get the data- attribute var user = document. GetElementById ('user'); var userName = plant. GetAttribute ('data-uname'); / / userName =' home of scripts' var userId = plant. GetAttribute ('data-uid'); / / userId =' 12345'/ / use setAttribute to set the data- property user. SetAttribute ('data-site',' http://www.jb51.net')

This method works in all modern browsers, but it is not for the purpose for which the custom data-* property of HTML 5 is used, otherwise it is no different from the custom property we used before, for example:

/ / use getAttribute to get the data- attribute var user = document. GetElementById ('user'); var userName = plant. GetAttribute ('uname'); / / userName =' home of scripts' var userId = plant. GetAttribute ('uid'); / / userId =' 12345'/ / use setAttribute to set the data- property user. SetAttribute ('site',' http://www.jb51.net')

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

The dataset property accesses the value of the data-* custom property

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

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.

There is also a special note: if the data- attribute name contains a hyphen, for example: data-date-of-birth, the hyphen will be removed and converted to hump naming, the previous attribute name conversion should be: dateOfBirth.

The code is as follows:

Pier

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); / / 'script House' console.log (el.dataset.dateOfBirth); / / 'el.dataset.dateOfBirth =' 1985-01-05' / / set the value of data-date-of-birth. Console.log ('someDataAttr' in el.dataset); / / false el.dataset.someDataAttr =' mydata'; console.log ('someDataAttr' in el.dataset); / / true if you want to delete a data- attribute, you can do this: delete el. Dataset. Id; or el .dataset. Id = null;.

It looks beautiful, , but unfortunately, the new dataset properties are only implemented in Chrome 8 + Firefox (Gecko) 6.0 + Internet Explorer 11 + Opera 11.10 + Safari 6 + browsers, so it's best to use getAttribute and setAttribute in the meantime.

About the data- property Selector

In actual development, you may find it useful, and you can select relevant elements based on custom data- attributes. For example, use querySelectorAll to select elements:

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

Document. QuerySelectorAll ('[data-flowering]')

/ / Select all elements that contain the value of the 'data-text-colour' attribute red

Document. QuerySelectorAll ('[data-text-colour= "red"]')

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

.user {width: 256px; height: 200px;} .user [data-name='feiwen'] {color: brown} .user [data-name='css'] {color: red} 1

Pier

The above is all the contents of the article "sample Analysis of H5 Custom attributes data-*". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.