HTML中自定义属性并通过JS获取属性值

是的，HTML可以自定义属性。自定义属性的语法是使用 data- 前缀，后面跟上自定义的属性名。例如：

<div id="example" data-custom="myValue">Hello World</div>

在这个例子中，data-custom 就是自定义属性，属性值为 myValue。

要通过 JavaScript 获取这个自定义属性的值，有几种方法：

方法 1: 使用 getAttribute 方法

你可以使用 getAttribute 方法来获取自定义属性的值：

const element = document.getElementById('example');
const customValue = element.getAttribute('data-custom');
console.log(customValue); // 输出 "myValue"

方法 2: 使用 dataset 属性

dataset 是一个更简洁的方式，它返回一个对象，其中包含了所有以 data- 开头的自定义属性。你可以直接通过属性名来访问：

const element = document.getElementById('example');
const customValue = element.dataset.custom;
console.log(customValue); // 输出 "myValue"

使用 dataset 时，属性名会自动从 data- 后面的部分转换为驼峰命名法。如果自定义属性名为 data-custom-value，可以这样访问：

const customValue = element.dataset.customValue;

这两种方法都可以有效获取自定义属性的值，选择哪种取决于对代码的可读性和简洁性的要求。