JS操作HTML自定义属性的方法

当需要在 HTML 元素上增加一些自定义属性时，我们可以使用 data-* 属性来实现。在 JS 中，通过修改这些自定义属性，可以改变元素的一些属性或行为。下面是完整的 JS 操作 HTML 自定义属性的攻略。

1. 获取 HTML 自定义属性的值

我们可以使用 .dataset 属性来获取 HTML 元素的自定义属性值，其中 dataset 属性是一个名值对（KeyValuePairs），属性名是去掉了 data- 前缀的 data 特性名称。以下是一个获取自定义属性值的示例：

<div id="myDiv" data-color="red"></div>

<script>
  const myDiv = document.querySelector('#myDiv');
  const color = myDiv.dataset.color;
  console.log(color); // 输出 "red"
</script>

上述代码中，我们首先选中了 id 为 "myDiv" 的 div 元素，然后使用 dataset 属性获取了该元素的 data-color 属性值“red”。

2. 修改 HTML 自定义属性的值

我们同样可以使用 .dataset 属性来修改 HTML 元素的自定义属性值。以下是一个改变自定义属性值的示例：

<button id="myButton" data-clicked="false">Click Me!</button>

<script>
  const myButton = document.querySelector('#myButton');
  myButton.addEventListener('click', () => {
    myButton.dataset.clicked = true;
  });
</script>

上述代码中，我们选中了 id 为 "myButton" 的 button 元素并添加了一个点击事件监听器。在点击该按钮时，监听器会将自定义属性值 data-clicked 改为了 true。

通过以上的示例，我们可以看出修改 HTML 元素自定义属性值的方法就是修改其 .dataset 属性。除此以外，我们还可以通过直接修改 HTML 元素的属性值来达到同样的效果。

综上所述，以上就是“JS操作HTML自定义属性的方法”的完整攻略。