JS 获取自定义属性 - Javascript

在 HTML 中，我们可以为元素添加自定义属性来存储额外的信息。然而，如何在 JavaScript 中获取这些自定义属性呢？下面我们来介绍几种方法。

1. 使用getAttribute方法

我们可以使用 getAttribute 方法来获取元素的自定义属性。这个方法的参数是属性名称。

const myElement = document.getElementById('my-element');
const myAttribute = myElement.getAttribute('my-attribute');
console.log(myAttribute); // 输出自定义属性的值

需要注意的是，getAttribute 方法返回的是字符串类型的值。如果我们需要将这个值转换成其他数据类型，需要手动进行转换。

2. 使用dataset属性

如果我们在 HTML 中使用了 data-* 形式的属性，那么我们可以使用 dataset 属性来获取这些属性的值。

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

const myElement = document.getElementById('my-element');
const myColor = myElement.dataset.color;
const mySize = myElement.dataset.size;
console.log(myColor); // 输出 "red"
console.log(mySize); // 输出 "large"

需要注意的是，dataset 属性返回的是一个对象，属性名是去掉了 data- 前缀的属性名称。

3. 直接获取自定义属性

在一些情况下，我们可以直接使用 JavaScript 获取元素的自定义属性。这种方法并不被官方推荐，因为 HTML 规范没有定义这种方式的标准。

<div id="my-element" my-attribute="my-value"></div>

const myElement = document.getElementById('my-element');
const myAttribute = myElement.myAttribute;
console.log(myAttribute); // 输出 "my-value"

需要注意的是，元素的自定义属性在 JavaScript 中必须使用驼峰式命名，而不能使用连字符 - 分隔单词。例如，my-attribute 必须写成 myAttribute。

结语

以上就是获取元素自定义属性的几种方法。我们可以根据情况选用适合自己的方式来获取元素的自定义属性。