DOM学习实用路线（5）——DOM自定义属性

最新推荐文章于 2022-10-17 20:04:59 发布

溜_x_i_a_o_迪

最新推荐文章于 2022-10-17 20:04:59 发布

阅读量247

点赞数 1

分类专栏： Web前端原生JavaScript JS——DOM 文章标签： javascript dom html5 前端 css3

本文链接：https://blog.csdn.net/u013946061/article/details/105408791

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS——DOM

12 篇文章 0 订阅

订阅专栏

data 自定义属性

在标签中定义data自定义属性：data-key=“value”;
在js操作该元素的 data 自定义属性：el.dataset
- 获取：el.dataset.key
- 设置: el.dataset.key = “value”

注意自定义属性：“data-”开头，但溜_x_i_a_o_迪童鞋自行想象自定义属性，尝试失败了！！！

<!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="box" data-definition="Custom"></div>
<script>
    {
        let box = document.querySelector("#box");
        console.log(box.definition);
    }
</script>
</body>
</html>

在这里插入图片描述

　　正确方式：通过dataset属性获取

let box = document.querySelector("#box");
//console.log(box.data-definition);
console.log(box.dataset.definition);

在这里插入图片描述

　　也可直接进行修改

let box = document.querySelector("#box");
//console.log(box.data-definition);
console.log(box.dataset.definition);
box.dataset.definition = "自定义属性";
console.log(box.dataset.definition);

在这里插入图片描述

　　自定义属性和Attributes（上一节有说明：DOM属性操作及ECMA、DOM 的属性操作的区别）一样存在文档中，只能是字符串，可通过JS操作html中的自定义属性，最终会呈现在html文档中。

let box = document.querySelector("#box");
box.dataset.definition = "自定义属性";
box.dataset.xiaodi = '6666';

在这里插入图片描述

（后续待补充）

溜_x_i_a_o_迪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM学习实用路线（5）——DOM自定义属性

data 自定义属性在标签中定义data自定义属性：data-key=“value”;在js操作该元素的 data 自定义属性：el.dataset获取：el.dataset.key设置: el.dataset.key = “value”&npsb;　溜_x_i_a_o_迪童鞋自行想象自定义属性，尝试失败了！！！<!DOCTYPE html><...
复制链接

扫一扫

专栏目录