可以将自己的属性添加到HTML元素中吗？
答案是可以。在前端开发中，我们常常需要为 HTML 元素添加一些自定义的属性，以便在 JavaScript 中对其进行操作或者样式渲染。虽然 HTML 规范中并没有明确规定用户自定义属性的使用，但是在实际开发中，通过一些约定俗成的方式可以轻松地实现自定义属性的添加和使用。
如何添加自定义属性？
在 HTML 元素中，我们可以使用 data-* 属性来添加自定义的属性，其中 * 可以替换为任意合法的属性名。例如：
---- --------------------------------------
这里我们为 div 元素添加了一个名为 "data-custom-attr" 的自定义属性，并赋值为 "custom-value"。注意，在命名自定义属性时应尽量避免与 HTML 标准属性重复，以免产生冲突。
如何在 JavaScript 中读写自定义属性？
通过自定义属性，我们可以在 JavaScript 中轻松地读写 HTML 元素的相关信息。例如，我们可以使用以下代码获取上述 div 元素的自定义属性值：
----- ------- - ------------------------------ ----- --------------- - --------------------------- ----------------------------- -- -- --------------
我们使用了元素的 dataset 属性来访问自定义属性值，其中 "data-" 前缀已经被省略。在读取自定义属性值时，我们需要将属性名中的 "-" 转换为驼峰式命名规则，例如 "data-custom-attr" 对应的 JavaScript 属性名为 "customAttr"。
同样地，在 JavaScript 中设置自定义属性值也非常简单。我们可以使用以下代码修改上述 div 元素的自定义属性值：
-------------------------- - ------------
自定义属性的指导意义
自定义属性的使用让我们可以更加方便地操作 HTML 元素，实现一些复杂的功能。例如，我们可以为某个元素绑定数据，使其与后台数据源关联起来，方便后续的 CRUD 操作。
同时，由于自定义属性并不属于 HTML 标准规范，因此在使用时需要注意一些潜在的风险。例如，如果多个开发者在同一个项目中使用了相同的自定义属性名，就可能会出现命名冲突的问题，影响代码的正确性和可维护性。因此，在使用自定义属性时，我们应该遵循一些约定和规范，以确保代码的可读性和可维护性。
示例代码
下面是一个完整的示例代码，展示了如何添加、读取和修改 HTML 元素的自定义属性：
--------- -----
------
------
----------------------
-------
------
---- -------------------------------------------------
--------
----- ------- - ------------------------------
----- --------------- - ---------------------------
----------------------------- -- -- --------------
-------------------------- - ------------
---------------------------------------- -- -- -----------
---------
-------
-------在这个示例代码中，我们创建了一个 div 元素，并为其添加了一个名为 "data-custom-attr" 的自定义属性。同时，在 JavaScript 中，我们通过访问元素的 dataset 属性来读取和修改该属性的值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24563