巧用 HTML5 data 属性

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

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

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

1、如何使用 data 属性呢？

一个 data 属性，本质就是：一个用于保存数据的自定义属性。它们总是以 data- 作为前缀，后面跟随着描述性的(只允许小写字母和连接字符-hyphens)。

一个元素可以有任意数量的 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 交互来配置插件。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。