枚举属性

布尔值属性

如果存在布尔值属性，则该属性始终为 true。布尔值属性包括 autofocus、inert、checked、disabled、required、reversed、allowfullscreen、default,、loop、autoplay、controls、muted、readonly、multiple, 和 selected。

如果存在这些属性中的一个（或多个），则相应元素处于停用、必需、只读等状态。如果不存在，则不处于相应状态。

布尔值可以省略、设置为空字符串或设置为属性的名称；但该值不必实际设置为字符串 true。所有值（包括 true、false 和 😀）虽然无效，但都会解析为 true。

以下三个标记是等效的：

如果属性值为 false，则省略该属性。如果该属性为 true，请添加该属性，但不要提供值。

例如，required="required" 在 HTML 中不是有效值；但由于 required 是布尔值，因此无效值会解析为 true。

但由于无效的枚举属性不一定会解析为与缺失值相同的值，因此养成省略值的习惯比记住哪些属性是布尔值、哪些属性是枚举值并可能提供无效值要容易得多。

在 true 和 false 之间切换时，请使用 JavaScript 完全添加和移除属性，而不是切换值。

const myMedia = document.getElementById("mediaFile");

myMedia.removeAttribute("muted");

myMedia.setAttribute("muted");

请注意，在 XML 语言（例如 SVG）中，所有属性（包括布尔属性）都需要包含一个值。

枚举属性

枚举属性有时会与布尔值属性混淆。它们是 HTML 属性，具有一组有限的预定义有效值。

与布尔属性一样，如果存在该属性但缺少值，则它们具有默认值。例如，如果您包含

尝试将 style 的 color 更改为除 inherit 之外的值。然后，尝试将 style 更改为 p 选择器。

请勿移除 display 属性，否则样式块将消失。

自定义属性

我们只是简单介绍了 HTML 全局属性。还有更多属性仅适用于一个或一组有限的元素。

即使定义了数百个属性，您可能也需要规范中未包含的属性。HTML 可以满足您的需求。

您可以通过添加 data- 前缀来创建所需的任何自定义属性。您可以为属性指定任何名称，但该名称必须以 data- 开头，后跟任何不以 xml 开头且不包含冒号 (:) 的小写字符序列。

虽然 HTML 具有容错性，即使您创建了不支持的属性（不以 data 开头），或者甚至以 xml 开头或包含 : 来创建自定义属性，也不会出现问题，但创建以 data- 开头的有效自定义属性还是有好处的。借助自定义数据属性，您可以确保自己不会意外使用现有的属性名称。自定义数据属性可应对未来变化。

虽然浏览器不会为任何特定的 data- 前缀属性实现默认行为，但有一个内置的数据集 API 可用于迭代自定义属性。自定义属性是一种通过 JavaScript 传达应用特定信息的绝佳方式。以 data-name 的形式向元素添加自定义属性，并通过 DOM 使用相关元素上的 dataset[name] 访问这些属性。

data-first-name="Blendan" data-last-name="Smooth"

data-formerly="Margarita Maker" data-aspiring="Load Balancer"

data-year-graduated="2022">

HAL and EVE could teach a fan to blow hot air.

您可以使用完整的属性名称 getAttribute()，也可以使用更简单的 dataset 属性。

el.dataset["machineLearning"]; // workshop

e.dataset.machineLearning; // workshop

dataset 属性会返回每个元素的 data- 属性的 DOMStringMap 对象。

上有多个自定义属性。通过 dataset 属性，您无需知道这些自定义属性是什么，即可访问它们的名称和值：

for (let key in el.dataset) {

customObject[key] = el.dataset[key];

}

本文中的属性是全局属性，这意味着它们可以应用于任何 HTML 元素（尽管并非所有属性都会对这些元素产生影响）。接下来，我们将深入了解链接，并介绍初始图片中未提及的两个属性（target 和 href）以及其他几个特定于元素的属性。

检验您的掌握情况

测试您对属性的了解程度。

id 在文档中应该是唯一的。

错误

请重试。

正确

正确！

选择格式正确的自定义属性。

data-birthday

正确

birthday

请重试。

data:birthday

重试