div标签里data-url="https://xxxx.com”用意是什么？

独行剑侠 · 发表于 2021-12-4 23:36

在某网站模板里发现div标签里好多 data-url="x网址”这样的标签，百度半天不是特别明白。
它的用意是什么？对它这个x网站有什么好处？？？增加流量么？

fmamcn · 发表于 2021-12-4 23:46

本帖最后由 fmamcn 于 2021-12-4 23:52 编辑

这一般是用来取值的，比如jQuery的方法：

[JavaScript] 纯文本查看 复制代码

$("***").data("url");

只是为了方便而已，方便取到其中的 x 以便后面的操作

coderzgq · 发表于 2021-12-5 00:32

自定义的data

AnkhSpirit · 发表于 2021-12-5 01:23

"data-X" = "Y" 可以自定义一个 class，然后就可以通过

[JavaScript] 纯文本查看 复制代码

element.dataset.X

读取 element 这个元素的 X class 的值 Y

AnkhSpirit · 发表于 2021-12-5 01:31

本帖最后由 AnkhSpirit 于 2021-12-5 01:33 编辑

打开这个网页看终端就能理解这个的作用

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test data-x</title>
</head>
<body>
    <div data-x="52poJieValue">52poJie</div>
<script>
    let div = document.querySelector('div')

    let value = div.dataset.x

    console.log(`自定义 class 的值为：${value}`)
</script>
</body>
</html>

ruffianmonkey32 · 发表于 2021-12-5 01:40

简单来说就是自定义的一个属性。比如input有name属性，这个是标签自带的，data-xxxx是你自定义的。

Domado · 发表于 2021-12-5 09:56

据我所知很多懒惰加载就是利用data url制作的

塞北孤舟 · 发表于 2021-12-5 10:53

H5 中的新东西，可以理解为在标签上创建变量，可以取值和赋值，也可以用于css的选择器，
data-xxx
“data-” 是固定的不可更改，后面的是自定义的,如user、name等有标识的名称，
在取值的时候也是使用名称取值
//取值
let divId= document.getElementById('divId');
console.log(divId.dataset.name); //张三
//赋值
divId.dataset.name= '李四';//李四
//取值&赋值的方法
1、js的getAttribute()方法
2、js的dataset()方法
3、jquery data()方法
4、jquery attr()方法

帐号		自动登录	找回密码
密码			注册[Register]

[求助] div标签里data-url="https://xxxx.com”用意是什么？

免费评分