js获取标签元素data-*属性值的4种方法

下面是详细的“js获取标签元素data-*属性值的4种方法”攻略：

1. 使用getAttribute()方法

getAttribute() 方法用于返回指定属性名的属性值。可以通过该方法获取元素的任意属性，包括 data-* 属性。

const element = document.querySelector('#myElement');
const dataValue = element.getAttribute('data-value');
console.log(dataValue); // 输出data-value属性的值

2. 使用dataset属性

dataset 属性可以用来获取元素的所有 data-* 属性。该属性返回一个对象，包含了所有 data-* 属性名及其对应的值。

<div id="myElement" data-name="John" data-age="25"></div>

const element = document.querySelector('#myElement');
const dataObject = element.dataset;
console.log(dataObject.name); // 输出John
console.log(dataObject.age); // 输出25

3. 使用DOM元素的dataset属性中的键名

可以使用DOM元素的 dataset 属性中的键名，通过字符串索引直接获取 data-* 属性的值。

<div id="myElement" data-index="0"></div>

const element = document.querySelector('#myElement');
const indexValue = element.dataset['index'];
console.log(indexValue); // 输出 0

4. 使用DOM元素的dataset属性中的解构语法

也可以使用ES6的解构语法来获取 data-* 属性的值。

<div id="myElement" data-color="red" data-size="large"></div>

const element = document.querySelector('#myElement');
const { color, size } = element.dataset;
console.log(color); // 输出red
console.log(size); // 输出large

以上就是“js获取标签元素data-*属性值的4种方法”的完整攻略，如有疑问，请留言。