html5 data-* attributes that store private custom data for a page or application

Example

Use data-* attributes to embed custom data:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

Browser support

IE, Firefox, Chrome, Safari, Opera

All major browsers support data-* attributes.

Definition and Usage

data-* attributes are used to store private custom data for a page or application.

data-* attributes give us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can be utilized within the page's JavaScript to create a better user experience (without making Ajax calls or server-side database queries).

data-* The attribute consists of two parts:

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

• The attribute value can be any string

Note: User agents will completely ignore automatic attributes prefixed with "data-" Define properties.

Differences between HTML 4.01 and HTML5

The data-* attributes are new in HTML5.

Syntax

<element data-*="somevalue">

Attribute value

Value	Description
somevalue	Specifies the value of the attribute (as a string).

In the attr and prop of jQuery, it is mentioned that improper use of property in versions before IE9 will cause memory leaks, and about Attribute and Property The difference is also a headache. In HTML5, the data-* method is added to customize attributes. The so-called data-* is actually the data- prefix plus a custom attribute name. This structure can be used to store data. Using data-* can solve the current situation of confusing and unmanaged custom attributes.

Reading and writing methods

data-*There are two setting methods, you can directly write

<div id="test" data-age="24">
        Click Here
    </div>

data-age on the

HTML element

tag It is a custom attribute. Of course, we can also operate it through JavaScript. Elements in HTML5 will have a dataset attribute, which is a collection of key-value pairs of the DOMStringMap type.

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

This is div A custom attribute of data-my has been added. Using JavaScriptThere are two things to pay attention to when operating dataset

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

2. If the attribute name also contains a hyphen (-), it needs to be converted to camel case naming. But if a selector is used in CSS, we need to use the hyphen format

The above is the detailed content of html5 data-* attributes that store private custom data for a page or application. For more information, please follow other related articles on the PHP Chinese website!