當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】【JQuery】获取 data-* 属性值
生活随笔
收集整理的這篇文章主要介紹了
【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