什么是“数据效果”属性？答案

【问题标题】：What is "data-effect" attribute?什么是“数据效果”属性？
【发布时间】：2013-09-20 03:26:23
【问题描述】：

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

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

据我所知，“st-effect-4”是一个 class 名称，但谁能告诉我这个 data-effect 是干什么用的？

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

相关回答：stackoverflow.com/questions/5032841/…
我虽然可以将任何命名的自定义属性添加到任何 HTML 属性（并且不需要 HTML5）？ HTML5 数据属性有何不同？
@YuriyGalanter 好吧，从技术上讲，你可以做到这一点 - 但我认为某些浏览器（可能是 IE）只是使用自定义属性有问题，我不是 100% 确定. HTML5 是第一个明确允许它的版本，并为此设置了一种方法。

【解决方案2】：

那些被称为HTML5 Custom Data attributes。

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

你在谷歌上找不到的原因是因为这些属性是用户生成的自定义属性供自己使用。

【讨论】：

【解决方案3】：

不是为了什么。

HTML5 规定（几乎）任何元素都可以拥有它想要的任何“data-*”属性，这些属性可以保存他们想要的任何值（只要它们可以被视为字符串，以存储在元素上）。

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

我目前在大学项目的引导样板中使用它。

【讨论】：