如何在 HTML 中声明自定义属性？

HTML 中声明自定义属性可以为开发人员提供方便和灵活性。通过自定义属性，可以在 HTML 标签中包含额外的信息，以支持 JavaScript 或 CSS 的实现。

声明自定义属性

在 HTML 中声明自定义属性，只需要在标签中添加有以 "data-" 开头的属性名。例如，下面的代码演示如何声明名为 "custom" 的自定义属性：

<div data-custom="example">这是自定义属性的例子</div>

这里的 "data-" 是必需的，因为它表示这是自定义数据属性。然后， "custom" 就是与自定义属性关联的名称，它可以是任何自定义的名称。

存储值

自定义属性可以用于存储任何值，例如字符串、数字和布尔值。可以使用 JavaScript 来读取和操作这些值。

例如，以下 JavaScript 代码演示如何读取名为 "custom" 的自定义属性的值：

const elem = document.querySelector('div');
const value = elem.dataset.custom;
console.log(value); // 输出 "example"

这里的 "dataset" 对象允许您访问自定义属性。在该代码中，它被用于从 "div" 元素中获取名为 "custom" 的自定义属性的值。

使用 CSS

还可以在 CSS 中使用自定义属性。通过在 CSS 中声明自定义属性，可以使 CSS 样式更加动态。可以通过以下方式声明自定义属性：

:root {
  --my-color: red;
}

在这个例子中，":root" 表示文档的根元素（通常是 "html" 标记）。变量名称为 "my-color"，它可以在整个文档中使用。然后，可以在 CSS 中使用此自定义属性：

div {
  background-color: var(--my-color);
}

这个例子设置 "div" 元素的背景颜色为自定义属性 "my-color"。值得注意的是，在使用自定义属性时，需要使用 "var()" 函数来引用它们。

总结

自定义属性是 HTML 中的强大功能，它允许开发人员在 HTML 元素中存储额外的信息。使用自定义属性，可以使 JavaScript 更加灵活，并使 CSS 样式更加动态。当声明自定义属性时，请遵循 "data-" 属性前缀的约定。