haizlin/fe-interview

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

Opened this issue · 21 comments

haizhilin2013 commented

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

yangyl568 commented

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

Mojitooooooooo commented

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

hbl045 commented

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

  • 🚀2
xjt31012 commented

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

naokimidori commented

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

18163759011 commented

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

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

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

tzjoke commented

关键字dataset

DarthVaderrr commented

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

  • 👍1
  • 👀1
Konata9 commented

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

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

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

参考文章：
使用数据属性

  • 👍3
seho-dev commented

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

vinceok commented

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

rorry121 commented

使用：

<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 commented

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

CoderLeiShuo commented

定义

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

例如：

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

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

通过JavaScript访问

读取数据属性

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

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

image-20200803105254150

具体代码如下：

<!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。

image-20200803105359016

通过CSS访问属性

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

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

如下图所示：

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

image-20200803111220436

  1. 通过属性选择器设置样式
article[data-column='3'] {
    background-color: deepskyblue;
    width: 50%;
}

如下图所示：

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

image-20200803111651451

  • 👍4
smile-2008 commented

使用：

<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 commented

新增自定义属性

amikly commented

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

Iambecauseyouare commented

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

never123450 commented

在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元素中存储自定义数据的灵活方式，可以方便地在前端开发中使用和操作这些数据。