前言

略

data-* 属性

data-* 属性是 HTML5 中的新属性。
data-* 属性用于存储页面或应用程序的私有自定义数据。
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符

JQuery 获取 data-* 属性值

<!DOCTYPE html>
<html>
<head><title>test</title><meta charset="UTF-8"><script src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
</head>
<body></body>
<div id="userDiv" data-id="123" data-name="张三" data-login="zhangsan" data-age="18">
</div><script type="text/javascript">let userDiv = $("#userDiv");console.log("user id : ", userDiv.data("id"));console.log("user login : ", userDiv.data("login"));console.log("user name : ", userDiv.data("name"));console.log("user age : ", userDiv.data("age"));
</script></html>

运行效果：

JavaScript 获取 data-* 属性值

<!DOCTYPE html>
<html>
<head><title>test</title><meta charset="UTF-8">
</head>
<body></body>
<div id="userDiv" data-id="123" data-name="张三" data-login="zhangsan" data-age="18">
</div><script type="text/javascript">var userDiv = document.getElementById("userDiv");console.log("user id : ", userDiv.dataset.id);console.log("user login : ", userDiv.dataset.login);console.log("user name : ", userDiv.dataset.name);console.log("user age : ", userDiv.dataset.age);
</script></html>

运行效果：

注意

骆驼命名法获取属性值

<!DOCTYPE html>
<html>
<head><title>test</title><meta charset="UTF-8">
</head>
<body></body>
<div id="userDiv" data-id="123" data-name="张三" data-login="zhangsan" data-age="18" data-date-of-birth="2007-12-25">
</div><script type="text/javascript">var userDiv = document.getElementById("userDiv");console.log("date of birth : ", userDiv.dataset.dateOfBirth);
</script></html>

大写无效

<!DOCTYPE html>
<html>
<head><title>test</title><meta charset="UTF-8">
</head>
<body></body>
<div id="userDiv" data-id="123" data-name="张三" data-login="zhangsan" data-age="18" data-dateOfBirth="2007-12-25">
</div><script type="text/javascript">var userDiv = document.getElementById("userDiv");console.log("date of birth : ", userDiv.dataset.dateofbirth);
</script></html>

参考

https://www.w3school.com.cn/tags/att_global_data.asp
https://www.cnblogs.com/lzijian/p/6322868.html

【JavaScript】【JQuery】获取 data-* 属性值相关推荐

jQuery获取标签属性值（一）
1.box-shadow属性可以设置盒子阴影的效果其参数为: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需的.水 ...
Jquery 获取元素属性值
获取属性获取内置属性获取自定义属性 prop( 'value name','value') attr('value name','value') jquery中内置属性只能用来获取内置自定义只能 ...
获取 html class属性,jquery获取class属性的值
jquery获取class属性的值的方法:首先创建一个前端示例文件:然后通过"$('#demo').attr('class');"或者"$('#demo')[0].cla ...
JavaScript jQuery获取radio/下拉框的选中值
JavaScript获取radio选中值 <ww:iterator value="proceList" status="rowstatus" id=&qu ...
html 获取文本框值,html - 如何在JavaScript中获取文本框值
html - 如何在JavaScript中获取文本框值我正在尝试使用JavaScript从HTML文本框中获取值,但值不是在空格之后例如: 我只得到:上面的"软件". 我正在使 ...
jquery html data属性,jQuery Mobile Data 属性
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观. 在下面的参考列 ...
javascript/jquery获取地址栏url参数的方法
本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 使用jquery获取url以及使用jquery获取url参数是我 ...
java高效获取内部类属性值_Java高级特性：内部类
内部类是什么内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...
js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...
php xml获取标签属性,php获取xml属性值
php获取xml属性值 $dom = new DOMDocument(); if (!$dom->load('attr.xml')) { echo "load books.xml fa ...

【JavaScript】【JQuery】获取 data-* 属性值

前言

data-* 属性

JQuery 获取 data-* 属性值

JavaScript 获取 data-* 属性值

注意

骆驼命名法获取属性值

大写无效

参考

【JavaScript】【JQuery】获取 data-* 属性值相关推荐

最新文章

热门文章