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

This article mainly shows you "html5 how to use data-* properties", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "html5 how to use data-* properties" this article.

Example

Use the data-* property to embed custom data:

OwlSalmon Tarantula

Browser support

IE 、 Firefox 、 Chrome 、 Safari 、 Opera

All major browsers support the data-* attribute.

Definition and usage

The data-* property is used to store private custom data for the page or application.

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can be leveraged in the JavaScript of the page to create a better user experience (no Ajax calls or server-side database queries).

The data-* property consists of two parts:

The attribute name should not contain any uppercase letters and must have at least one character after the prefix "data-"

Property value can be any string

Note: the user agent completely ignores custom attributes prefixed with "data-".

Differences between HTML 4.01 and HTML5

The data-* property is a new property in HTML5.

Grammar

Attribute value

Value describes the value (as a string) of the property specified by somevalue.

Attr and prop of jQuery mentioned that improper use of property in previous versions of IE9 will cause memory leakage, and the difference between Attribute and Property is also a headache. Data-* is added to HTML5 to customize attributes. The so-called data-* is actually a data- prefix plus a custom attribute name, which can be used for data storage. Using data-* can solve the chaotic and unmanaged situation of custom properties.

Reading and writing mode

There are two ways to set data-*, which can be written directly on the tag of the HTML element

Click Here

Data-age is a custom attribute. Of course, we can also manipulate it through JavaScript. All elements in HTML5 have an attribute of dataset, which is a collection of key-value pairs of DOMStringMap type.

Var test = document.getElementById ('test'); test.dataset.my =' Byron'

This adds a custom attribute of data-my for div. There are two things to pay attention to when using JavaScript to operate dataset

1. We need to remove the prefix data-*, when adding or reading attributes. Like the example above, we don't use the form test.dataset.data-my = 'Byron';.

two。 If the attribute name also contains a hyphen (-), you need to switch to hump naming, but if you use a selector in CSS, you need to use the hyphen format

The above is all the content of the article "how html5 uses data-* properties". 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.