當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用data-自定义数据及如何获取该值

發布時間：2023/12/2 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了使用data-自定义数据及如何获取该值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data-</title>
</head>
<body>
<p>h5新增屬性data-的使用</p>
<ul id="u">
<li onclick="show(this)" id="red" data-type="1">red</li>
<li onclick="show(this)" id="green" data-type="2">green</li>
<li onclick="show(this)" id="blue" data-type="3">blue</li>
<li id="myDiv" data-appid="123" data-myname="lsx">myDiv</li>
</ul>
<script src="js/jquery-3.0.0.min.js"></script>
<script>
// 方法一：使用getAttribute()獲取data-值
function show(animal) {
var animalType = animal.getAttribute("data-type");
alert("the " animalType " is " animal.innerHTML);
}
// 方法二：使用dataset屬性
$(function(){
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;//獲取data-appid的值
var myName = div.dataset.myname;//獲取data-myname的值
$("#u").on("click","#myDiv",function (e) {
// console.log(e);
alert(" data-appid: " appId " data-myname: " myName);
})
// 方法三：使用attr()
var appId1 = $("#myDiv").attr("data-appid");
$("#u").on("click","#myDiv",function () {
console.log(appId1);
})

// 方法四：使用data() 注意：使用data()方法時，參數不寫前面的data-
var appId2 = $("#myDiv").data("myname");
$("#u").on("click","#myDiv",function () {
console.log(appId2);
})
})
</script>
</body>
</html>
更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的使用data-自定义数据及如何获取该值的全部內容，希望文章能夠幫你解決所遇到的問題。

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