html标签属性中加data,巧用 HTML5 data 属性

kea-socket-tr-fs8.png

巧用 HTML5 data 属性

HTML 5 之前，需要使用其他的数据时，是非常糟糕的。为了使一切正常有效，你不得不将数据填充到 rel 或 class 属性。

有些开发者，甚至创建自己的自定义属性。

自从 HTML5 自定义 data 属性出现，你可以存储任意数据，通过一种简单，符合标准的方式。

1、如何使用 data 属性呢？

一个 data 属性，本质就是：一个用于保存数据的自定义属性。它们总是以 data- 作为前缀，后面跟随着描述性的(只允许小写字母和连接字符-hyphens)。参考：http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

一个元素可以有任意数量的 data 属性。

一个使用 list 保存用户数据的案例，如下：

Calvin

当然，这数据对于一个访客并没有多大的用处，因为这数据是看不见的。但是，创建 web 应用是非常有用。

想象在你应用有一个删除按钮：

Delete

所有你需要的数据，都已经准备好，只需发送给你的后台脚本了。不需要 rel 或 解释其他属性获得 IDs 和 actions。

Data URLs 让你的生活变得更简单。

2、你可以保存什么数据？

使用 data 属性，需要记住一点，data 属性不能保存对象。如果你真的想要保存对象，可通过对象序列化。

3、使用 JavaScript 读/写 data 属性

使用删除按钮作为例子，看看如何使用 JavaScript 访问数据。

// 这是我们的按钮

var button = document.getElementById('your-button-id');

// 取值

var cmd = button.getAttribute('data-cmd');

var id = button.getAttribute('data-id');

// 重新赋值

button.setAttribute('data-cmd', yourNewCmd);

button.setAttribute('data-id', yourNewId);

相当简单，是吧？现在你可以传送 cmd 和 id 给你的应用，通过 AJAX 请求即可。或者你可以任何你想要做的处理了。

4、使用 jQuery 读/写 data 属性

使用 jQuery 的 .attr() 方法：

(或者可以使用 .data() 方法)

// 取值

var cmd = $("#your-button-id").attr('data-cmd'); // $("#your-button-id").data('data-cmd');

var id = $("#your-button-id").attr('data-id');

// 赋值

$("#your-button-id").attr('data-cmd', yourNewCmd).attr('data-id', yourNewId);

注意，不要将上面的方式，与 jQuery 的 .data() 弄混了。尽管 data 属性和 .data() 的运作原理有些重叠，它们是两个完全不同的东西。

如果你对 .data() 不熟悉，那么就牢记住 .attr() 就好了。

5、使用 dataset API

HTML5 有一个用于与这类型数据的 API。唉，IE10 和 低于IE10 并没有完全支持这一特性。

再次以按钮案例，让我们看看如何使用 dataset API 来设置 data 属性的：

// here's our button

var button = document.getElementById('your-button-id');

// Get the values

var cmd = button.dataset.cmd;

var id = button.dataset.id;

// Change the values

button.dataset.cmd = youNewCmd;

button.dataset.id = yourNewId;

这里没有 data - 前缀或破折号。类似于 CSS 属性工作在 JavaScript ，你将必须使用驼峰命名法。

dataset API 转换每一个，你总是会在 HTML 使用 data-some-attribute-name，而 JavaScript 中是 dataset.someAttributeName。

6、其他

以上的案例都是很基础的，你可以使用自定 data 属性做到更多。几个其他用法案例，如下：

6.1 过滤(Filtering)

假如你有一个数据列表，并且你想要通过关键词过滤。将关键词放入到一个 data 属性，而后写一个脚本循环遍历，根据情况来展示或隐藏它们。

HTML 代码

• Ford
• Chevrolet

...

遍历脚本

$('#filter').on('keyup', function() {

var keyword = $(this).val().toLowerCase();

$('.cars > li').each( function() {

$(this).toggle( keyword.length < 1 || $(this).attr('data-models').indexOf(keyword) > -1 );

});

});

6.2 添加样式

争议倾认为，使用 classes 是更好的，可是你也可以通过 data 属性来添加样式。如何通过元素的一个固定 data 属性来应用样式呢？

首先，HTML

再就是样式

[data-warning] {

background: red;

}

如果想要通过 data 属性值，来添加样式呢？这可以应用到任何包含有 error 的 data-warning 属性。

[data-warning*=error] {

color: red;

}

6.3 配置

Bootstrap 使用 data 属性，经由 JavaScript 作为 HTML 交互来配置插件。

下面就是一个 popover 的案例：

Popover on top

参考文章：

https://www.abeautifulsite.net/working-with-html5-data-attributes

http://html5doctor.com/html5-custom-data-attributes/