javascript中如何获取data-*属性值？

在JavaScript中，你可以使用dataset属性来获取HTML元素上自定义的data-*属性值。这是一个简单直观的方法，适用于现代浏览器。以下是如何操作的示例：

假设你有以下HTML元素，其中包含一个自定义的data-*属性：

<div id="example" data-custom-info="Hello, world!"></div>

你可以使用以下JavaScript代码来获取这个data-custom-info属性的值：

// 通过ID获取元素

var element = document.getElementById("example");

// 使用dataset属性访问data-*值，注意驼峰命名规则

var customInfo = element.dataset.customInfo;

console.log(customInfo); // 输出: Hello, world!

在JavaScript中，data-*属性名称会被转换为驼峰命名法。也就是说，如果属性名为data-foo-bar，在JavaScript中你应该使用element.dataset.fooBar来访问它。

如果需要兼容较旧的浏览器（不支持dataset属性），则可以使用getAttribute方法：

var customInfo = element.getAttribute("data-custom-info");

console.log(customInfo); // 输出: Hello, world!

这种方法在所有支持JavaScript的浏览器中都可用，但使用dataset更现代且语法更简洁。

Was this helpful?

YesNo

0 / 0