巧用 HTML5 data 属性

0.12字数 992阅读 6094
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 保存用户数据的案例,如下:

<li data-id="1234" data-email="calvin@example.com" data-age="21">Calvin</li>

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

想象在你应用有一个删除按钮:
<button type="button" data-cmd="delete" data-id="1234">Delete</button>

所有你需要的数据,都已经准备好,只需发送给你的后台脚本了。不需要 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 代码

<input type="text" id="filter">
<ul class="cars">
    <li data-models="mustang, f150, 500, fusion">Ford</li>
    <li data-models="corvette, silverado, impala, cavalier">Chevrolet</li>
    ...
</ul>

遍历脚本

$('#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

<span class="label" data-warning>

再就是样式

[data-warning] {
background: red;
}

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

[data-warning*=error] {
color: red;
}

6.3 配置

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

下面就是一个 popover 的案例:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
</button>

参考文章:

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

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

推荐阅读更多精彩内容