Fe-interview: [html] 第24天说说你对属性data-的理解

Created on 9 May 2019 · 17Comments · Source: haizlin/fe-interview

第24天说说你对属性data-的理解

html

Source

haizhilin2013

Most helpful comment

原本 HTML 也允许自定义 attributes 因此在早期前端，为了将数据塞在标签中，往往会采用自定义属性存放数据的方法。

而 data- 便是 HTML 5 中用来存放数据的标签。使用 data-* 时，需要注意，data- 之后的单词必须是小写的，但是可以用多个 - 连接。而在对应的 DOM 方法中，我们可以通过 ele.dataset[属性名] 进行访问。在这里的属性名可以使用驼峰（转换规则和 vue 的组件名称转换一样）。

相比之前的自定义属性存放数据，使用 data-* 的方法，在数据的获取上会比较方便。

参考文章：
使用数据属性

Konata9 on 7 Aug 2019

👍3

All 17 comments

平时用的比较多的是把必要数据绑定到某标签上然后，js、jquery 点击事件或者交互事件的时候获取dataset里的属性值，便于业务处理。

yangyl568 on 10 May 2019

学习中，自己用过的只有做图片懒加载的时候用data-属性存过src

xiaofan1106 on 10 May 2019

data- 属性是H5新增的自定义属性，也可以用来存储值。我个人用的不多，这个data- 属性倒是和vue中的v-bind 功能相似，自定义属性，绑定数据。也和上面说的一样可以通过js进行获取使用

hbl045 on 10 May 2019

🚀1

我都是在class id name等全部被占用了才想起来去用data-属性~

xjt31012 on 10 May 2019

data-*属性主要是用来储存自定义数据，所存储的属性值能够在后续js中操作调用。

naokimidori on 10 May 2019

data-* 属性，我个人理解就是用来暂存非用户输入的数据，并且能在js里面使用

18163759011 on 11 May 2019

data- 是HTML5新增的自定义属性，可以用来页面间跳转时携带数据。

yxkhaha on 11 May 2019

👍1

这个不得不提一下标准出来之前的做法。html是支持自定义attribute的，当时为了给前端传数据，大家自己定义的attribute五花八门，不好跟标准区分，js取数据方式也跟标准attribute一样。人家一看这哪行啊，你们不能再这么搞了，听我说，你们都在自定义属性前加个data-前缀

vinceyi on 18 May 2019

关键字dataset

tzjoke on 28 May 2019

注意一点，data-attr attr不支持驼峰命名法，只能用小写命名，被坑过很多次

DarthVaderrr on 4 Jul 2019

👀1

原本 HTML 也允许自定义 attributes 因此在早期前端，为了将数据塞在标签中，往往会采用自定义属性存放数据的方法。

相比之前的自定义属性存放数据，使用 data-* 的方法，在数据的获取上会比较方便。

参考文章：
使用数据属性

Konata9 on 7 Aug 2019

👍3

首先定义一下： data-是h5对自定义标签属性拓展的知识点，可以存储自定义属性，可以通过js获取到，一般会存储业务需要的数据，和vue中的bind很类似
是暂存非用户输入的数据

1018715564 on 11 Aug 2019

data-*是HTML5新增的元素属性，用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用。

vinceok on 15 Jan 2020

使用：

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

rorry121 on 2 Mar 2020

我认为主要是为了保存一些马上会用到的属性
比如懒加载时保存的url

blueRoach on 18 Jun 2020

定义

data-属性是HTML5新增的一个属性，它允许在HTML元素中存储额外的信息。语法非常简单，在元素上定义属性，且以data-开头，这就是一个数据属性。

例如：

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

在<article>元素上，通过data-定义了三个属性，这三个属性保存了相应的数据。article元素将会携带着这些数据，在其他地方也可以进行获取使用。

通过`JavaScript`访问

读取数据属性

在外部可以通过js代码访问这些属性的值，方法有两种：

可以通过getAttribute()配合它们完整的HTML名称去读取它们。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <article id="electriccars" data-column="3" data-index-number="1234" data-parent="cars">
        语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：
    </article>
</body>

<script>
    var article = document.querySelector('#electriccars');

    // 1. 通过getAttribut()方法获取属性值
    console.log(article.getAttribute('data-columns'));
    console.log(article.getAttribute('data-index-number'));
    console.log(article.getAttribute('data-parent'));
</script>

</html>

可以通过dataset对象去获取到数据属性，需要获取属性名中data-之后的部分(如果以破折号连接的名称需要改写为驼峰命名，例如index-number转换为indexNumber)

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <article id="electriccars" data-column="3" data-index-number="1234" data-parent="cars">
        语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：
    </article>
</body>

<script>
    var article = document.querySelector('#electriccars');

    // 2. 通过dataset对象获取属性值
    console.log(article.dataset.column);
    // 破折号命名需要改写为驼峰命名
    console.log(article.dataset.indexNumber);
    console.log(article.dataset.parent);
</script>

</html>

写入数据属性

每一个属性都是可以读写的字符串，因此也是可以写入数据属性的。例如：

var article = document.querySelector('#electriccars');

article.dataset.column = 5; // 将column修改为5
console.log(article.dataset.columns); // 5

如下图所示：column属性的值已经变成了5。

通过`CSS`访问属性

data设定为HTML属性，它们同样能被CSS访问。

使用attr()函数来显示data-parent的内容

/* 双冒号表示伪元素 */
article::after {
    /* 在article元素后添加内容，内容为通过attr()函数获取的data-parent属性的值 */
    content: attr(data-parent);
    color: red;
 }

如下图所示：

通过attr()函数获取到data-parent属性的值，然后作为伪元素添加到article元素的后边。

通过属性选择器设置样式

article[data-column='3'] {
    background-color: deepskyblue;
    width: 50%;
}

如下图所示：

通过属性选择器，对article元素设置了背景颜色及宽度

CoderLeiShuo on 3 Aug 2020

👍2

使用：

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

MrZ2019 on 24 Sep 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

[html] 第39天 title与h1、b与strong、i与em的区别分别是什么？

haizhilin2013 · 3Comments

[vue] 说说你对vue组件的设计原则的理解

haizhilin2013 · 3Comments

[vue] prop验证的type类型有哪几种？

haizhilin2013 · 3Comments

[软技能] 第61天知道IPV6是什么吗？说说它和IPV4的区别是什么？

haizhilin2013 · 3Comments

[vue] 在vue项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？

haizhilin2013 · 3Comments

Fe-interview: [html] 第24天 说说你对属性data-的理解

Most helpful comment

All 17 comments

定义

通过JavaScript访问

读取数据属性

写入数据属性

通过CSS访问属性

Related issues

Fe-interview: [html] 第24天说说你对属性data-的理解

通过`JavaScript`访问

通过`CSS`访问属性