自定义属性

尤所不同

于 2022-10-03 18:35:52 发布

阅读量169

点赞数

分类专栏： JavaScript 文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/qq_52175048/article/details/127154748

版权

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了HTML5中新增的数据属性(data attributes)的概念及其使用方法。数据属性允许开发者为页面或应用程序存储自定义数据，这些数据可以被JavaScript读取并用于各种目的。文章详细解释了如何在HTML元素中设置data-*属性，并通过JavaScript的dataset对象来访问这些属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标准属性：标签天生自带的属性
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头

  <div data-id="1" data-name="yrx"></div>

在DOM对象上一律以dataset对象方式获取

    const one = document.querySelector('div') 
    console.log(one.dataset)//获取所有的这个标签的自定义属性

在这里插入图片描述

    const one = document.querySelector('div') 
    console.log(one.dataset.yrx)//获取标签的指定自定义属性

在这里插入图片描述