HTML "data-" 属性作为 JavaScript 参数

HTML5 引入了 data-* 属性，允许开发者在 HTML 元素上存储自定义数据。这些属性可以通过 JavaScript 调用，使开发者能够更好地将数据从 HTML 传递到 JavaScript 中。在本篇文章中，我们将探讨如何使用 data-* 属性将数据传递给 JavaScript，以及如何在实际项目中应用。

使用 data-* 属性

要使用 data-* 属性，只需在 HTML 元素上添加带有自定义名称的 data- 前缀即可。例如，假设我们想将一条消息 ID 存储在一个 div 元素中：

<div id="message" data-message-id="12345">This is a message.</div>

我们在 div 元素上添加了 data-message-id="12345" 属性。现在，我们可以使用 JavaScript 获取该属性的值：

const messageDiv = document.getElementById('message');
const messageId = messageDiv.dataset.messageId;
console.log(messageId); // 输出 "12345"

我们可以通过访问元素的 dataset 属性来获取 data-* 属性的值。这个属性是一个对象，其中包含元素上所有以 data- 前缀命名的属性及其对应的值。

在实际项目中应用

使用 data-* 属性可以方便地将数据从 HTML 传递到 JavaScript 中。例如，在一个在线商店项目中，我们可以为每个商品添加一个自定义 data-product-id 属性：

<div class="product" data-product-id="123">
  <h2>Product Name</h2>
  <p>Description of product.</p>
  <button class="add-to-cart">Add to cart</button>
</div>

现在，当用户点击“添加到购物车”按钮时，我们可以通过 JavaScript 获取所选择的产品 ID：

const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(button => {
  button.addEventListener('click', event => {
    const productId = event.target.closest('.product').dataset.productId;
    console.log(productId);
  });
});

这里我们使用了 querySelectorAll 方法来选取所有带有“添加到购物车”类的按钮，并通过 forEach 循环遍历它们。当用户点击任何一个按钮时，我们可以获取该按钮的最近 .product 祖先元素，并从其 dataset 中提取 data-product-id 值。

总结

data-* 属性是一个非常有用的功能，可以将数据从 HTML 传递到 JavaScript 中，以实现更好的交互和动态效果。在实际项目中应用时，我们可以使用它来存储各种自定义数据，例如产品 ID、用户 ID、页面状态等等。不过需要注意，data-* 属性值只能是字符串，如果需要存储复杂数据类型，需要进行转换或者使用其他方法来实现。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29062