[html] 第24天说说你对属性data-的理解 #82

haizhilin2013 · 2019-05-09T20:34:16Z

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

yangyl568 · 2019-05-10T01:47:35Z

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

Mojitooooooooo · 2019-05-10T02:58:12Z

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

hbl045 · 2019-05-10T03:15:49Z

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

xjt31012 · 2019-05-10T07:43:49Z

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

naokimidori · 2019-05-10T16:07:23Z

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

18163759011 · 2019-05-11T03:38:03Z

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

yxkhaha · 2019-05-11T07:07:50Z

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

vinceyi · 2019-05-18T09:11:38Z

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

tzjoke · 2019-05-28T16:11:07Z

关键字dataset

DarthVaderrr · 2019-07-04T01:57:21Z

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

Konata9 · 2019-08-07T15:04:12Z

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

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

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

参考文章：
使用数据属性

seho-dev · 2019-08-11T12:23:47Z

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

vinceok · 2020-01-15T08:26:34Z

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

rorry121 · 2020-03-02T05:33:22Z

使用：

<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

blueRoach · 2020-06-18T02:40:51Z

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

CoderLeiShuo · 2020-08-03T03:30:20Z

定义

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元素设置了背景颜色及宽度

smile-2008 · 2020-09-24T02:44:19Z

使用：

<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

xiezhenghua123 · 2021-04-24T02:13:17Z

新增自定义属性

amikly · 2021-11-11T17:30:58Z

data-* 全局属性可以用来存储自定义的数据，并嵌入在所有的HEML元素上，此自定义的属性也可以被JavaScript获取并利用。

Iambecauseyouare · 2023-03-09T04:13:03Z

date-属性是H5新增的自定义属性，也可以用来存储值

never123450 · 2023-09-04T02:59:05Z

在HTML中，属性名以 "data-" 开头的属性被称为自定义数据属性（custom data attributes），也可以简称为 "data-" 属性。

自定义数据属性允许开发者在HTML元素中存储与元素相关的自定义数据，这些数据可以通过JavaScript进行访问和操作。这些属性的命名可以根据开发者的需要自定义，但必须以 "data-" 开头，后面可以跟上自定义的名称。

自定义数据属性的语法如下：

在上面的示例中， `data-custom-name` 和 `data-custom-age` 是自定义数据属性，它们分别存储了名字和年龄的值。

使用JavaScript可以轻松地访问和操作这些自定义数据属性。可以通过 dataset 属性来访问元素的自定义数据属性。例如，使用 dataset.customName 可以获取到 data-custom-name 的值。
const element = document.querySelector('div');
console.log(element.dataset.customName); // 输出: John
console.log(element.dataset.customAge); // 输出: 25
自定义数据属性提供了一种在HTML元素中存储自定义数据的灵活方式，可以方便地在前端开发中使用和操作这些数据。

haizhilin2013 added the html html label May 9, 2019

haizhilin2013 mentioned this issue Aug 16, 2020

[html] 第489天举例说明使用data-有什么优点？ #2786

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[html] 第24天说说你对属性data-的理解 #82

[html] 第24天说说你对属性data-的理解 #82

haizhilin2013 commented May 9, 2019

yangyl568 commented May 10, 2019

Mojitooooooooo commented May 10, 2019

hbl045 commented May 10, 2019

xjt31012 commented May 10, 2019

naokimidori commented May 10, 2019

18163759011 commented May 11, 2019

yxkhaha commented May 11, 2019

vinceyi commented May 18, 2019

tzjoke commented May 28, 2019

DarthVaderrr commented Jul 4, 2019

Konata9 commented Aug 7, 2019

seho-dev commented Aug 11, 2019

vinceok commented Jan 15, 2020

rorry121 commented Mar 2, 2020 •

edited

Loading

blueRoach commented Jun 18, 2020

CoderLeiShuo commented Aug 3, 2020

smile-2008 commented Sep 24, 2020

xiezhenghua123 commented Apr 24, 2021

amikly commented Nov 11, 2021

Iambecauseyouare commented Mar 9, 2023

never123450 commented Sep 4, 2023

[html] 第24天 说说你对属性data-的理解 #82

[html] 第24天 说说你对属性data-的理解 #82

Comments

haizhilin2013 commented May 9, 2019

yangyl568 commented May 10, 2019

Mojitooooooooo commented May 10, 2019

hbl045 commented May 10, 2019

xjt31012 commented May 10, 2019

naokimidori commented May 10, 2019

18163759011 commented May 11, 2019

yxkhaha commented May 11, 2019

vinceyi commented May 18, 2019

tzjoke commented May 28, 2019

DarthVaderrr commented Jul 4, 2019

Konata9 commented Aug 7, 2019

seho-dev commented Aug 11, 2019

vinceok commented Jan 15, 2020

rorry121 commented Mar 2, 2020 • edited Loading

blueRoach commented Jun 18, 2020

CoderLeiShuo commented Aug 3, 2020

定义

通过JavaScript访问

读取数据属性

写入数据属性

通过CSS访问属性

smile-2008 commented Sep 24, 2020

xiezhenghua123 commented Apr 24, 2021

amikly commented Nov 11, 2021

Iambecauseyouare commented Mar 9, 2023

never123450 commented Sep 4, 2023

[html] 第24天说说你对属性data-的理解 #82

[html] 第24天说说你对属性data-的理解 #82

rorry121 commented Mar 2, 2020 •

edited

Loading

通过`JavaScript`访问

通过`CSS`访问属性