The data-* attribute is a feature in HTML5 used to store custom data, allowing information on elements that does not affect the structure and style of the page. 1. It is defined by data-followed by custom names, such as

; 2. Advantages include strong readability, avoiding naming conflicts, and good compatibility; 3. Data can be obtained or set through JavaScript dataset objects, such as element.dataset.userId; 4. It is often used to store AJAX parameters, control component status, and pass plug-in configuration; 5. When using it, you need to pay attention to not having sensitive information, avoiding a large amount of data, reasonably naming, and keeping updates and synchronous.

Sometimes we need to store some extra information on the HTML element, but we don't want to affect the structure or style of the page. At this time, the custom data attributes (data-*) provided by HTML5 come in handy.

What is the data-* attribute?

data-* is a standard way introduced in HTML5, allowing us to store arbitrary custom data on elements. Its naming format is data- followed by a name you define yourself, such as:

 <div data-user-id="123" data-role="admin"></div>

These properties are not rendered into visual content by the browser, nor affect the page layout, but can be easily accessed and operated through JavaScript. Ideal for saving some meta information related to DOM elements.

Why use the data-* attribute?

Compared with common practices in the past, such as writing information in class or id, or storing it through hidden input, data-* is more semantic, standardized, and easier to maintain.

It has several obvious advantages:

• Strong readability : Others can see which custom data are at a glance when looking at your HTML.
• Avoid naming conflicts : data-* The name is controlled by you and will not collide with other attributes.
• Good compatibility : modern browsers support it, and libraries such as jQuery also have built-in convenient APIs to read and write them.

How to use it in practice?

Using data-* in a project is generally used in combination with JavaScript. For example:

Get data

 const element = document.querySelector('#myElement');
const userId = element.dataset.userId; // Pay attention to the camel naming

If you write data-user-id in HTML, the corresponding dataset.userId in JavaScript is dataset.userId .

Setting up data

 element.dataset.prefetchUrl = '/api/user/123';

This automatically creates data-prefetch-url property on the element.

Common application scenarios include:

• Store parameters required for AJAX request
• Control component status (such as whether the menu is expanded)
• Pass configuration items to front-end plug-in

For example, you have a button that needs to load user data after clicking, you can write it like this:

 <button data-user-id="456" class="load-user">Load user</button>

Then listen to the click event in JS, and directly take the value from dataset.userId to request the interface.

What should you pay attention to when using it?

Although data-* is very convenient, it is not used casually. There are a few details to note:

• Don't store sensitive information : because this data is exposed to HTML and anyone can see it.
• Avoid large amounts of data : Although you can store JSON strings in, don't use them as a client database.
• Reasonable naming : The name should be meaningful, try to unify the style as much as possible, and facilitate teamwork.
• Pay attention to update synchronization : If the data changes frequently, remember to update the corresponding data-* value, otherwise you may get old data.

If you need to use multiple words, it is recommended to separate them with hyphen, which will become camel-like access in JS. For example, data-item-index → dataset.itemIndex .

---

Basically that's it. The data-* attribute is a small and practical function. The rational use can make the front-end code clearer and more organized.

The above is the detailed content of Leveraging Custom Data Attributes in HTML5 for Storing Information. For more information, please follow other related articles on the PHP Chinese website!