Question

我最近下载了一个代码并显示

<button data-effect="st-effect-4">Slide along</button>

根据我的想法，“st-effect-4”是一个class名称但有人可以告诉我 data-effect 的用途是什么吗？

Answer 1

HTML5允许自定义属性，只要它们以“data-”开头即可。这是具有特定值的自定义属性。

Answer 2

自定义数据属性旨在存储私有的自定义数据页面或应用程序，没有更合适的属性或元素。这些属性不适合使用独立于使用属性的站点的软件。每个HTML元素都可以包含任意数量的自定义数据属性具有任何价值的指定。

您无法在Google中找到它的原因是因为这些属性是用户为自己使用而生成的自定义属性。

Answer 3

这不是什么。

HTML5指定（几乎）任何元素都可以拥有它想要的任何“data- *”属性，这些属性可以保存他们想要的任何值（只要它们可以像字符串一样对待，存储在元素上）。 / p>

所以这可能是一个库的一部分，或者它可能只是某个选择器的CSS：

button[data-effect] { background : blue; }
button[data-effect="st-effect-4"]:active { background : purple; }

或者它在JS中用作游戏控件的查询选择器...
谁知道？

Answer 4

自定义数据属性旨在将自定义数据存储为页面或应用程序的私有数据，而没有更合适的属性或元素。

这些属性不适用于独立于使用属性的网站的软件。

每个HTML元素都可以指定任意数量的自定义数据属性，具有任何值。

Answer 5

对于Mary Lou的教程 - 这是为了控制带入菜单的动画。这可以重新分配给其他触发元素 - 但是使其生效的代码是之前出现的DIV元素 - st-trigger-effects。

如果您查看代码和控制它的CSS，您将能够将其重新分配给您需要使用它的地方。

我目前正在大学项目的bootstrap样板中使用它。