當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/9/19 javascript 38 豆豆

生活随笔收集整理的這篇文章主要介紹了【JavaScript】【JQuery】获取 data-* 属性值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

略

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-* 属性值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：英特尔 Ultra 5 135U 处理器
下一篇：【Spring Boot】【Thymel