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

最新推荐文章于 2023-02-22 20:05:48 发布

weixin_30361641

最新推荐文章于 2023-02-22 20:05:48 发布

阅读量621

点赞数

文章标签： python c#

原文链接：http://www.cnblogs.com/prospective-zkq/p/9899588.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data-</title>
</head>
<body>
<p>h5新增属性data-的使用</p>
<ul id="u">
    <li οnclick="show(this)" id="red" data-type="1">red</li>
    <li οnclick="show(this)" id="green" data-type="2">green</li>
    <li οnclick="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>

转载于:https://www.cnblogs.com/prospective-zkq/p/9899588.html

weixin_30361641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用data-自定义数据及如何获取该值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>data-</title></head><body><p>h5新增属性data-的使用</p><ul id="u"> ...
复制链接

扫一扫