Javascript 如何向标准HTML元素添加自定义属性？

我试图弄清楚battlelog是如何从Edge browser内部启动本机应用程序的，结果发现：

<button class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1">
Play now
</button>

现在玩

---

请帮助我了解这些属性（如数据绑定操作等）是如何添加到按钮元素的，以及它们是如何处理的？

数据-*属性是自定义属性；它们仅用于存储特定数据，web开发人员将在其JavaScript代码中随时使用这些数据

<button id="mybutton" class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1">
Play now
</button>

现在玩

例如，要从jquery中访问

数据导入步骤

值，开发人员可以键入

$（'mybutton'）.attr（'data-intro-step'）

或

$（'mybutton'）.data（'data-intro-step'）

，并将其与代码中的某些内容一起使用

---

通常它们是从php或js框架中添加的，如

jquery插件

或

angularjs

，并在js中使用。您还可以从js中添加这些属性，以便以后使用。

如果您想使用jquery，请参见此。请参见此自定义属性只是将有效数据存储在DOM元素中的一种方法，该元素没有固有的含义或视觉属性。它们是如何添加的，以及它们是如何使用（或处理）的，不能仅仅由您显示的HTML来决定。“数据-*属性不是标准的”-“通常它们是从php添加的”-这是一个非常狭隘的世界观。