HTML5 是一种广泛使用的 Web 标准，它提供了许多新的标记和属性来帮助开发人员更好地构建现代 Web 应用程序。在本文中，我们将重点介绍如何在 JavaScript 中设置 HTML5 属性。
什么是 HTML5 属性？
HTML5 属性是指 HTML5 规范中定义的新属性。这些属性包括但不限于 data-* 属性、placeholder、required、autofocus 等。这些属性可以通过 JavaScript 动态设置或修改，使 Web 应用程序具有更高的交互性和可访问性。
在 JavaScript 中设置 HTML5 属性有多种方式，下面介绍其中两种常见方法。
1. 使用属性赋值方式
通过 JavaScript 可以直接修改元素的属性值，因此可以使用以下方式动态设置 HTML5 属性：
const element = document.querySelector("#my-element"); element.setAttribute("data-my-attribute", "my-value"); element.required = true; element.autofocus = true;
代码中，我们使用 setAttribute 方法设置 data-* 属性的值，并通过直接给元素属性赋值的方式设置 required 和 autofocus 属性的值。
2. 使用数据属性（data attribute）方式
HTML5 引入了 data-* 属性，这些属性可以用于存储自定义数据，并且可以通过 JavaScript 访问和修改。使用数据属性设置 HTML5 属性的方式如下：
<div id="my-element" data-my-attribute="my-value"></div>
const element = document.querySelector("#my-element"); element.dataset.myAttribute = "new-value";
代码中，我们在 HTML 中定义了一个具有 data-my-attribute 属性的元素，并使用 dataset 对象来修改其值。
示例代码
以下是在 JavaScript 中设置 HTML5 属性的完整示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------- -- ----- ---------- ------- ------ -------------- -- ----- ------- ------ ----------- ------------- ------------------- --------- ------- -------------------------- -------- ----- ----- - ------------------------------------ ------------------------------------------- ---------------- --------------- - ----- ----- ------ - ------------------------------------- ------------------------- - ------------ -------------------------------- -- -- - ------------------------- --- --------- ------- -------展开代码
在这个示例中，我们动态设置了 data-custom-attribute、autofocus 和 data-custom-attr 属性，并添加了一个事件监听器来处理按钮点击事件。
总结
本文介绍了在 JavaScript 中设置 HTML5 属性的两种常见方法，并提供了示例代码。了解如何动态设置 HTML5 属性可以帮助开发人员构建更交互性和可访问性的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14917
