如何在JavaScript中獲取數據屬性的值

要獲取JavaScript中數據屬性的值，可以使用dataset屬性或getAttribute()方法。 1. 使用dataset屬性時，data-前綴的屬性會自動轉為camelCase形式，例如data-user-id對應dataset.userId，適合標準命名且代碼更簡潔；2. 使用getAttribute()方法可直接通過完整屬性名獲取值，如getAttribute('data-user-id')，適用於動態屬性名或需要精確控制的場景；3. dataset僅包含以data-開頭的屬性，未設置屬性時dataset返回undefined，getAttribute()返回null；根據可讀性和具體需求選擇合適方法即可。

To get the value of a data attribute in JavaScript, you can use the dataset property or the getAttribute() method. Both are reliable, but they work slightly differently and are useful in different scenarios.

Using the dataset property

The dataset property provides a convenient way to access data attributes that are prefixed with data- . The key thing to know is that data attribute names are automatically converted to camelCase in the dataset object.

For example, if you have an HTML element like this:

 <div id="myElement" data-user-id="123" data-category-name="Books"></div>

You can access the values like this:

 const element = document.getElementById('myElement');

console.log(element.dataset.userId); // "123"
console.log(element.dataset.categoryName); // "Books"

• data-user-id becomes userId (hyphens followed by a letter become uppercase letters)
• data-category-name becomes categoryName

This method is clean and intuitive, especially when working with many data attributes.

Using getAttribute()

Alternatively, you can use getAttribute() to get the exact value by the full attribute name:

 const element = document.getElementById('myElement');

console.log(element.getAttribute('data-user-id')); // "123"
console.log(element.getAttribute('data-category-name')); // "Books"

This method:

• Is more explicit and avoids any confusion about naming conversion
• Works consistently even with unusual or complex data attribute names
• Is useful when the attribute name is stored in a variable or built dynamically

Key points to remember

• Use dataset for simplicity when attribute names follow standard naming (letters, numbers, hyphens)
• Use getAttribute() when you need full control or are working with dynamic attribute names
• dataset only includes attributes that start with data-
• If a data attribute is not set, both methods return undefined or null ( dataset returns undefined , getAttribute() returns null )

Basically, both approaches work well—choose based on readability and your specific use case.

以上是如何在JavaScript中獲取數據屬性的值的詳細內容。更多資訊請關注PHP中文網其他相關文章！