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

This article mainly explains "how to understand the custom properties of HTML5 data-* and JS operation", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to understand the custom attributes of HTML5 data-* and JS operation" bar!

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

For example:

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:

The code is as follows:

/ / use getAttribute to get the data- attribute

Var user = document. GetElementById ('user')

Var userName = plant. GetAttribute ('data-uname'); / / userName =''

Var userId = plant. GetAttribute ('data-uid'); / / userId =' 12345'

/ / use setAttribute to set the data- property

User. SetAttribute ('data-site',' https://www.yisu.com')

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:

The code is as follows:

/ / use getAttribute to get the data- attribute

Var user = document. GetElementById ('user')

Var userName = plant. GetAttribute ('uname'); / / userName =''

Var userId = plant. GetAttribute ('uid'); / / userId =' 12345'

/ / use setAttribute to set the data- property

User. SetAttribute ('site',' https://www.yisu.com')

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); / / an DOMStringMap

Console.log (el.dataset.id); / / '1234567890'

Console.log (el.dataset.name); / /''

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:

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:

The code is as follows:

.user {

Width: 256px

Height: 200px

}

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

Color: brown

}

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

Color: red

}

one

Pier

Thank you for reading, the above is "how to understand the custom attributes of HTML5 data-* and JS operation" of the content, after the study of this article, I believe you on how to understand the custom attributes of HTML5 data-* and JS operation of this problem has a deeper understanding, the specific use of the need for you to practice verification. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.