HTML5 中的 data-* 如何处理数据详解

时间:2021-1-8 作者:admin

lvzhenbang

这些数据对于页面的访问者来说用处不大,因为用户看不到,但是它对于web应用的开发者很有用。这时你可以想象一下增加一个删除按钮,这个按钮可以删除列表中的某个用户,通过用户的数据信息 `data-id` ,你不需要其他的相关东西或者属性,就可以直接向后端发送请求删除该用户。

删除

这个简单的使用场景就描述了 `data-*` 如何工作。

### [](#用-html5-data--能存储些什么)用 HTML5 `data-*` 能存储些什么

`data-*` 虽然是个好东西,但它不是万能的,它本身还是 `[Attribute](https://github.com/lvzhenbang/article/blob/master/js/porp-attr.md)` ,而 `Attribute` 就是只能存储字符串类型数据。如果你将一个对象直接存储在其中是不行的,但对对象进行序列化处理后,还是可以的。

#### [](#用javascript来readingwriting-data-)用JavaScript来reading/writing `data-*`

// 用户信息的操作按钮
var oBtn = document.getElementById(‘opt-btn’);
// 删除按钮
var delBtn = document.getElementById(‘delte-btn’);
// 获得信息
var id = oBtn.getAttribute(‘data-id’);
// 改变数据信息
delBtn.setAttribute(‘data-id’, id);

是不是很简单,然后你就可以通过AJAX向后端请求,做你想要做的事情了。

#### [](#用jquery来readingwriting-data-)用jQuery来reading/writing `data-*`

在jQuery中有一个 `.attr()` 方法就可以解决读写data数据的功能了。

// 获得用户信息的操作按钮
var oBtn = $(‘#opt-btn’);
// 获得删除按钮
var delBtn = $(‘#delte-btn’);
// 获得操作的信息
var id = oBtn.attr(‘data-id’);
// 改变删除按钮的数据信息
delBtn.attr(‘data-id’, id);

熟悉jQuery的你可能会想到不是还有一个 `.data()` 方法吗? 虽然 `.attr()` 和 `.data()` 在操作 `data-*` 上有一些重叠,但他们完全是两回事。没有深入理解的同学,只需要知道 `.attr()` 就好了。

#### [](#html5-有原生的api-dataset-来readingwriting-data-)HTML5 有原生的API `dataset` 来reading/writing `data-*`

HTML5 就是开发就是这样方便,但它存在一些兼容性问题,IE系列的浏览器不支持。但是时代在进步,这些奇葩的浏览器最终会成为历史,所以还是有必要说两句。

// 获得用户信息的操作按钮
var oBtn = document.getElementById(‘opt-btn’);
// 获得删除按钮
var delBtn = document.getElementById(‘delte-btn’);
// 获得操作的信息
var id = oBtn.dataset.id;
// 改变删除按钮的数据信息
delBtn.setAttribute.id = id;

值得注意的是这里没有数据前缀和 `-`,类似于我们在JavaScript中操作css属性的方式,我们在使用dataset API时,你在HTML中用 `data-some-attribute-name`,但在JavaScript中你需要用 `dataset.someAttributeName` 这样的驼峰形式。

### [](#用-html5-data--能做些什么事情呢)用 HTML5 `data-*` 能做些什么事情呢

这里有几个简单的例子,仅供参考学习。

#### [](#过滤)过滤

这其实是一个简化版的模糊查询,我曾经再一次面使用遇到过这样的问题,就是让回答如何做一个简单的模糊查询。

假如你有一个如下面所示的demo,你想要通过滤每个用户的关键字来筛选用户。只要你将它们的关键字放入 `data attribute` 中,然后编写一个简短的脚本循环并显示/隐藏它们即可。

html
  • 王明
  • 张华
  • 王丽
  • 王大牛
  • 王小二
  • 张丽
js

$(‘#filter’).on(‘keyup’, function() {
var keyword = $(this).val().toLowerCase();
$(‘.person > li’).each( function() {
$(this).toggle( keyword.length < 1 || $(this).attr(‘data-models’).indexOf(keyword) > -1 );
});
});

[demo演示](https://link.funteas.com?target=https%3A%2F%2Fjsfiddle.net%2Fsanlv%2Fw6c4xsf9%2F)

#### [](#style-样式)style 样式

毫无疑问你可以使用 `class` 来定义样式,但是你也可以用 `data-*` 来应用样式(不用管data数据的值):

HTML

CSS

[data-warning] {
background: red;
}

但是如果你想依据数据属性的值呢?你可以这样使用:

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

[data-warning*=update] {
color: green;
}

[data-warning*=modify] {
color: blue;
}

上面的使用是不是很熟悉,相信研究过bootstrap的同学对此应该不会陌生。

可参考bootstrap中将[link转化为按钮](https://link.funteas.com?target=https%3A%2F%2Fv3.bootcss.com%2Fcss%2F%23buttons)

[demo演示](https://link.funteas.com?target=https%3A%2F%2Fjsfiddle.net%2Fsanlv%2FbvnwL202%2F)

#### [](#响应式开发)响应式开发

在做响应式开发的过程中我们不仅可以使用媒体查询,我们还可以用 `data-*`

// html

移动端内容

// css
div[data-role=”mobile”] {
display:block;
}

#### [](#configure-js插件的配置项)configure js插件的配置项

BootStrap用自定义数据属性作为可选择的配置项来配置插件。一个 [popover](https://link.funteas.com?target=https%3A%2F%2Fv3.bootcss.com%2Fjavascript%2F%23popovers) 例子如下:

点我弹出/隐藏弹出框

#### [](#和伪元素的结合实现tool-tip)和伪元素的结合实现tool Tip

// html
数据属性

// css
.tooltip {
position: relative;
display: inline-block;
padding: 4px 8px;
color: white;
background-color: green;
border-radius: 2px;
cursor: pointer;
}

.tooltip::after {
position: absolute;
top: 110%;
left: 0;
content: attr(data-tooltip);
display: none;
width: 200%;
padding: 6px 12px;
color: white;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 6px;
}

.tooltip:hover::after {
display: inline-block;
}

[demo演示:](https://link.funteas.com?target=https%3A%2F%2Fjsfiddle.net%2Fsanlv%2Fq1a7kt28%2F)

### [](#什么时候应该用)什么时候应该用

1.js动画计算中可能需要的元素初始宽高,透明度等样式

2.Flash加载Flash电影的的存储参数,也包括(img/video/audio)

3.在游戏开发中存储一些人物属性的数据

4.web统计标签数据的证明(也就是我们常用的给元素取一个为一名字,方便统计)

### [](#什么时候不应该用)什么时候不应该用

1.不要用它来替换一个现有的属性或元素。如下:

8pm

我们应该像下面这样定义:

8pm

2.数据属性不应该用作meta data 和 micro format的替代品。

micro format 被设计给人类用的,是被引入给我们的标记上下文的。例如:如果你有一张Vcard用来记录个人或组织的联系信息,那么你将会给这张Vcard一个类,让机器理解这是一个联系信息。代码如下:

Aaron Lumsden

而不是像下面的代码:

Aaron Lumsden

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。