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

This article mainly introduces the HTML5 custom attribute data how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this HTML5 custom attribute data how to use the article will have a harvest, let's take a look.

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:

Copy the code

The code is as follows:

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:

Copy the code

The code is as follows:

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

Copy the code

The code is as follows:

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

Copy the code

The code is as follows:

Pier

Var el = document.querySelector ('# user')

Console.log (el.id); / / 'user'

Console.log (el.dataset); / / an 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 hours; / / 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:

Copy the code

The code is as follows:

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

Copy the code

The code is as follows:

.user {

Width: 256px

Height: 200px

}

.user [data-name='feiwen'] {

Color: brown

}

.user [data-name='css'] {

Color: red

}

one

Pier

This is the end of the article on "how to use the custom attribute data of HTML5". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use the custom attribute data of HTML5". If you want to learn more knowledge, you are 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.