當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】【JQuery】获取 data-* 属性值
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】【JQuery】获取 data-* 属性值
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
略
data-* 屬性
- data-* 屬性是 HTML5 中的新屬性。
- data-* 屬性用于存儲(chǔ)頁面或應(yīng)用程序的私有自定義數(shù)據(jù)。
- 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 “data-” 之后必須有至少一個(gè)字符
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>運(yùn)行效果：
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>運(yùn)行效果：
注意
駱駝命名法獲取屬性值
<!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
總結(jié)
以上是生活随笔為你收集整理的【JavaScript】【JQuery】获取 data-* 属性值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英特尔 Ultra 5 135U 处理器
- 下一篇： 【Spring Boot】【Thymel