赋予 HTML 元素自己的属性 JS - JavaScript

在 HTML 中，我们可以使用属性为元素添加各种功能和样式。通常，这些属性是预定义的，并由浏览器识别和解释。

然而，在某些情况下，我们可能需要为元素添加自定义属性，以满足特定需要。这时候，我们可以使用 JavaScript 来实现。

设置自定义属性

我们可以使用 JavaScript 中的 setAttribute() 方法为元素设置自定义属性。例如，以下代码将为一个 div 元素设置了一个名为 data-id 的自定义属性，并给它赋了一个值 123：

const div = document.querySelector("div");
div.setAttribute("data-id", "123");

获取自定义属性值

我们可以使用 JavaScript 中的 getAttribute() 方法获取元素的自定义属性值。例如，以下代码将获取一个 div 元素的自定义属性 data-id 的值：

const div = document.querySelector("div");
const dataId = div.getAttribute("data-id");
console.log(dataId); // 123

使用自定义属性实现功能

自定义属性的最大优势在于我们可以使用它们来实现特定的功能。例如，我们可以使用自定义属性指定要执行的操作和相关参数，然后使用 JavaScript 监听元素的点击事件，并根据自定义属性的值来执行相应的操作。

以下是一个简单的例子，它演示了如何使用自定义属性来显示和隐藏元素。在这个例子中，我们为一个 button 元素添加了一个自定义属性 data-target，并将其设置为要显示/隐藏的元素的 ID。然后，我们使用 JavaScript 监听按钮的点击事件，并根据自定义属性的值来执行显示或隐藏操作。

<button data-target="my-div">显示/隐藏</button>
<div id="my-div">这是一个要显示/隐藏的 div 元素。</div>

const button = document.querySelector("button");
const targetId = button.getAttribute("data-target");
const target = document.getElementById(targetId);

button.addEventListener("click", () => {
  if (target.style.display === "none") {
    target.style.display = "block";
  } else {
    target.style.display = "none";
  }
});

总结

自定义属性是 HTML 和 JavaScript 的强大组合，它们可以帮助我们为元素添加自定义功能和样式，以满足特定的需求。虽然我们应该避免滥用自定义属性，但在某些情况下，它们是非常有用的。