Html5 DataSet

最新推荐文章于 2026-02-05 04:22:51 发布

原创最新推荐文章于 2026-02-05 04:22:51 发布 · 570 阅读

本内容遵循CC 4.0 BY-SA版权协议

https://github.com/gztrljh

本文介绍了HTML5中data-*属性的使用，用于在标签中存储自定义数据。通过dataset API或jQuery方法进行存取，常用于点赞功能、本地化翻译等场景。详细讲解了getAttribute、setAttribute、dataset API、jQuery.attr和jQuery.data的用法。

Html5 DataSet

一.简单介绍
二.简单示例
三.传值场景
- 1.点赞
- 2.本地化翻译
四.值的存取

一.简单介绍

新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。微信小程序有用这个玩意，方便传值，data-属性是允许js动态修改的
也可以允许 CSS选择器进行样式设置
地址：dataset学习地址

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset

二.简单示例

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



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

</body>
<script>
    var el = document.querySelector('#user');
    let id = el.id
    let dataid = el.dataset.id
    let datauser = el.dataset.user

    console.log(id);
    console.log(dataid);
    console.log(datauser);



    console.log('数据类型:' + typeof el.dataset.dateOfBirth, '数据:' + el.dataset.dateOfBirth);



    //逻辑运算符说明：
    //|| 或的关系，如果前面的值等于false就会自动执行第二个值
    // && 且的关系，如果前面的值等于true就会自动执行第二个值
    console.log(isEmpty(el.dataset.dateOfBirth) && "ss");

    // 设置数据，遇到这种data-date-of-birth 用
    el.dataset.dateOfBirth = '1960-10-03';

    console.log(el.dataset.dateOfBirth);


    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    }

</script>

</html>

三.传值场景

1.点赞

比如我们要做一个文章点赞的功能，1是点赞，0是不点赞，通过ajax传递，这时就可以直接在标签上
在这里插入图片描述

2.本地化翻译

<h2 id="food-pkd" class="food" data-en="Peking Duck" data-ja="北京ダック" data-fr="Canard laqué de Pékin" data-de="Pekingente"> 北京烤鸭 </h2>

四.值的存取

1.getAttribute、setAttribute 存取 dataset

在这里插入图片描述

<script>

    //get
    var user = document.getElementById("name").getAttribute("data-user");
    console.log(user);

    //set
    
    document.getElementById("name").setAttribute("data-user","拜登");

    //get
    var user = document.getElementById("name").getAttribute("data-user");
    console.log(user);
</script>

该方法不适用要同时获取多个data-xx的值，很麻烦

2.dataset API 存取 dataset

在这里插入图片描述

<script>
    //返回一个DOMStringMap 类型
    var stringmp = document.getElementById('name').dataset;
    //get
    console.log(stringmp.user);

    //set/add 是一样的操作
    stringmp.age = 74;
    console.log(stringmp.age);


</script>