HTML5的data-*屬性允許開發(fā)者在HTML元素中存儲自定義數(shù)據(jù)，且不依賴非標(biāo)準(zhǔn)屬性或類。其核心使用方法與注意事項如下：1. 屬性名以data-開頭，后接小寫字母及可選連字符或下劃線；2. 可通過getAttribute()或dataset屬性訪問，后者自動轉(zhuǎn)換屬性名為駝峰命名；3. 適用于存儲小型非敏感數(shù)據(jù)，如ID、UI狀態(tài)或組件配置；4. 不應(yīng)存儲敏感信息或大量數(shù)據(jù)；5. 屬性名需全小寫，JavaScript中以駝峰形式訪問。例如data-item-price在JavaScript中對應(yīng)itemPrice。

HTML5 introduced a neat feature called data attributes, which let you store extra information in your HTML elements without needing to rely on non-standard attributes or classes. They're super handy when you want to pass small bits of data from the HTML to JavaScript, especially for dynamic behavior.

What Exactly Are data-* Attributes?

A data-* attribute is any attribute in an HTML element that starts with data-. The * can be replaced with any custom name you choose, as long as it's made up of lowercase letters and possibly hyphens or underscores.

For example:

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

These are valid and won’t break HTML validation. Browsers ignore them unless you access them via JavaScript, making them safe and flexible.

How to Access data-* Attributes with JavaScript

You can read and write these attributes using standard DOM methods. Here’s how:

• Use getAttribute('data-something')
• Or use the dataset property (camelCased version of the attribute name)

Here’s a quick example:

const element = document.querySelector('[data-user-id]');

// Using getAttribute
const userId = element.getAttribute('data-user-id'); // "123"

// Using dataset
const role = element.dataset.role; // "admin"

Note: If your attribute is named data-user-role, you access it via dataset.userRole — hyphens become camelCase.

When Should You Use Them?

They’re great for storing small pieces of data directly in the markup. Some common use cases include:

• Storing IDs or keys for JavaScript interactions
• Toggling UI states (like data-state="open")
• Holding configuration values for widgets or components

But keep in mind:

• They shouldn't hold sensitive data since anyone can see them
• Avoid large chunks of data — they're not meant for that

A Few Things to Watch Out For

• Stick to lowercase letters in your attribute names (e.g., data-category, not data-Category)
• Don’t overuse them — sometimes state should live in JavaScript instead
• Hyphens matter in naming, but JavaScript accesses them as camelCase

So if you have:

<span data-item-price="19.99"></span>

In JavaScript, you'd access it like this:

element.dataset.itemPrice; // "19.99"

Basically, data-* attributes give you a clean, standards-compliant way to embed custom data into your HTML elements. And accessing them isn’t complicated once you know the right syntax.

以上是什么是HTML5數(shù)據(jù)屬性（數(shù)據(jù) - *），您如何訪問它們？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！