如何为标准 HTML 元素添加自定义属性？ [复制]

Question

我试图弄清楚 Battlelog 是如何从 Edge 浏览器内部启动本机应用程序的，结果如下：

<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>

请帮助我了解这些属性（如 data-bind-action 等）是如何添加到按钮元素的以及如何处理它们的？

Answer 1

data-* 属性是自定义属性；它们仅用于存储 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 访问 data-intro-step 值，开发人员可以键入 $('#mybutton').attr('data-intro-step') 或 $('#mybutton').data('data-intro-step') 并在他的代码中使用它。

通常它们是从 php 或 jquery-plugins 或 angularjs 等 js 框架添加的，并在 js 中使用。把你也可以从js中添加到以后使用。