html数据属性
HTML5数据属性使您可以将自定义数据分配给元素。 本文介绍了如何使用它，并提供了理想使用时间的示例。
介绍
在HTML5之前，我们不得不依靠使用'class'或'rel'属性来存储少量可用于网站的数据片段。 这有时会导致问题，并可能导致网站的样式和功能之间发生冲突。 HTML5的出现引入了一个称为“数据”的新属性。 在本文中，我将看一些如何使用此属性以及如何正确使用该属性的示例。
随着网站变得越来越受数据驱动和类似于应用程序的影响，它们开始保存有关特定元素的更多数据。 例如，如果我们正在创建音频应用程序。 我们可能具有标准标记，例如：
<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" />
</audio>上面的标记是完全可以接受的，但是有时我们可能想要存储有关除来源之外的每个轨道的更多信息。 例如，我们可能希望能够分配其他特定的曲目信息，例如持续时间，节奏和艺术家。 为此，我们可以为每个音频源分配自定义数据属性，例如：
<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>通过提供这些自定义数据属性，我们可以在应用程序中根据持续时间，节奏或艺术家使用它们的关联值来执行搜索，过滤或分组等任务。
如何使用数据属性
数据属性的名称必须以字符串'data-'开头，并且必须使用任何HTML命名约定在连字符后至少包含一个字符。
W3C的数据属性规范指出：
自定义数据属性旨在存储页面或应用程序专用的自定义数据，对于这些自定义数据没有更多合适的属性或元素。
这意味着我们只应在应用程序内部使用该数据，而不应将其用于向用户显示信息。 同样重要的是要注意，您可以将任意数量的自定义属性分配给具有任何值的元素。
什么时候应该使用数据属性？
我们已经研究了如何使用data属性，但是为了使您有一个清晰的了解，让我们看几个示例。
幸运的是，Webdesigntuts +已经涵盖了一些良好用例示例的详细说明。 其中一个教程介绍了如何通过在锚标记中分配通知项来使用它们来样式化和显示菜单通知气泡。 这次，data属性用于指示通知气泡的气泡值。
<a href="#" class="pink" data-bubble="2">Profile</a>在另一个快速技巧中，我们还可以看到如何将其用作工具提示标记的一部分
<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>这段时间用于显示工具提示的文本。
什么时候不应该使用数据属性？
我们不应该将数据属性用于已经具有已建立的或更合适的属性的任何内容。 例如，不适合使用：
<span data-time="20:00">8pm<span> 当我们可以在以下time元素中使用已经定义的datetime属性time ：
<time datetime="20:00">8pm</time>数据属性不应替代元数据或微格式。 微型格式主要是为人类设计的，并被引入以提供标记环境。 例如，如果您有一个Vcard提供有关个人或组织的联系信息，则您可以给它提供一个“ vcard”类，以使计算机了解这是联系信息。
使用微格式，您应该将标记用作
<div class="vcard">
<span class="fn " >Aaron Lumsden</span>
</div>而不是使用data属性，例如
<div class="vcard">
<span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>要了解有关微格式的更多信息，请访问Mircorformats.org 。
在CSS中使用数据属性
一旦我们在HTML标记中实现了数据属性，便可以使用CSS定位它们。 重要的是要注意，尽管在某些情况下可能不适合，但不应将数据属性直接用于样式设置。 在CSS中定位数据属性类似于定位其他属性，您可以像这样简单地使用它们：
[data-role="page"] {
/* Styles */
}例如，如果您要创建一个跨设备友好的网站或应用程序，那么您可能希望定位一些只能在移动设备上查看的特定内容。 进行以下标记
<div data-role="mobile">
Mobile only content
</div>然后，使用CSS您可以在桌面上查看时隐藏所有仅移动页面。
div[data-role="mobile"] {
display:none;
}尽管不建议根据查看设备隐藏内容，但在某些情况下还是合适的。 您应根据每种情况和案例来确定。
也可以使用来自属性的数据并通过CSS显示。 尽管规范指出您不应该使用custom属性中的数据来显示给用户，但是可以这样做，并且在某些情况下可能是最好的方法。 这就是它的实现方式。
<div class="test" data-content="This is the div content">test</div>在CSS中，您将使用'：after'伪元素（或其他一些生成的内容），并将属性用作'after'内容的一部分，如下所示：
.test {
display: inline-block;
}
.test:after {
content: attr(data-content);
}然后，将在“ .text” div中显示“ This is div content”。
在jQuery中使用数据属性
现在，我们研究了如何使用CSS使用data属性来定位元素，让我们研究如何使用jQuery来保存数据。
注意：处理数据不在本教程的讨论范围内，因为本教程专门针对前端开发人员和设计人员。
我们有几种方法可以使用jQuery从元素中获取数据。 让我们看看其中的一些。
<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>如果我们有一个锚标签（如上面的标签），其数据属性为data-info，那么我们可以像获取任何其他属性值一样访问该数据。
$('.button').click(function(e) {
e.preventDefault();
thisdata = $(this).attr('data-info');
console.log(thisdata);
});您可以通过在Web检查器中打开js控制台，然后单击链接来进行测试。
data属性的优点在于，我们也可以使用它来提供json数据，如下所示。
<a href="google" class="button" data-info='{"foo":"bar"}'></a>使用jQuery，我们可以使用jQuery的数据对象方法获取此数据。
$('.button').click(function(e) {
e.preventDefault();
thisdata = $('div').data('info').foo;
console.log(thisdata);
});然后，上面的示例将“ bar”记录到控制台日志中。
跨浏览器支持
我知道在您对使用此新属性过于迷惑之前，您将需要了解哪些浏览器支持它以及何时可以开始使用它。 好消息是，所有现代浏览器都很好地支持它。 任何支持HTML的内容都将能够访问data属性。 如果您使用该属性进行样式设置以及访问数据（谨慎使用），则浏览器将需要支持CSS3选择器。
更好的消息是，所有浏览器（甚至是IE7）都允许您已经在元素上使用data- *属性，如果您使用的是jQuery 1.4或更高版本，则可以使用jQuery的数据对象访问数据。 但是，如果您仅使用JavaScript，则必须使用JavaScript的“ getAttribute”方法访问数据。
要获得数据集的完整列表支持，可以查看canIuse.com 。
结论
随着网站和Web应用程序变得越来越复杂并开始保存更多信息和数据，此新属性无疑是工具箱中令人欢迎的附加功能。 现在，我已经在许多真实的示例中使用了它，并且发现它是一种提供响应速度更快的网站的非常有用的方法，因为原本必须从服务器中提取的数据现在可以在其中生成。标记，并在必要时使用。
总而言之，如果您遵循以下三个规则，则可以确保以最有效和最语义的方式使用新属性。
现在，您已经对HTML5数据属性及其使用方式有了更深入的了解，我鼓励您立即在您的项目中实现它。
您是否在任何实际示例中使用过它？ 您在什么情况下使用过它？ 它是在节省您的时间，还是您希望通过此属性扩展一下？ 在下面的评论中让我知道。
要了解您还可以使用HTML5做什么，请查看Envato Market上数以千计的有用HTML5代码片段 。
html数据属性
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
