Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

yangyl568

yangyl568 commented on May 10, 2019

@yangyl568

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

Mojitooooooooo

Mojitooooooooo commented on May 10, 2019

@Mojitooooooooo

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

hbl045

hbl045 commented on May 10, 2019

@hbl045

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

xjt31012

xjt31012 commented on May 10, 2019

@xjt31012

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

naokimidori

naokimidori commented on May 10, 2019

@naokimidori

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

18163759011

18163759011 commented on May 11, 2019

@18163759011

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

yxkhaha

yxkhaha commented on May 11, 2019

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

vinceyi commented on May 18, 2019

@vinceyi

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

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

关键字dataset

DarthVaderrr

DarthVaderrr commented on Jul 4, 2019

@DarthVaderrr

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

Konata9

Konata9 commented on Aug 7, 2019

@Konata9

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

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

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

参考文章:
使用数据属性

seho-dev

seho-dev commented on Aug 11, 2019

@seho-dev

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

vinceok

vinceok commented on Jan 15, 2020

@vinceok

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

rorry121

rorry121 commented on Mar 2, 2020

@rorry121

使用:

<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

8 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @vinceyi@smile-2008@haizhilin2013@Konata9@never123450

        Issue actions

          [html] 第24天 说说你对属性data-的理解 · Issue #82 · haizlin/fe-interview