HTML data-*自定义属性

最新推荐文章于 2024-10-14 22:08:45 发布

无盐海

最新推荐文章于 2024-10-14 22:08:45 发布

阅读量3.3k

点赞数 1

分类专栏： JQuery HTML-XML

本文链接：https://blog.csdn.net/Fanbin168/article/details/51835574

版权

JQuery 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

HTML-XML

23 篇文章 0 订阅

订阅专栏

HTML5 data-* 自定义属性

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <div>

        <!--这个data-*自定义属性就是以data开头后面跟一个'-'然后后面的名字自己取，我这里取的是age和name-->
        <input id="btn" type="text" data-age="25" data-name="张三" name="Age" />


        <button οnclick="fun.GetResult()">获取data-age的值</button>
        <button οnclick="fun2.GetResult()">获取data-name的值</button>
    </div>
</body>
</html>
<script type="text/javascript">
   //第一种方式获取data-age的值
    var fun = {
        GetResult: function () {
            var age = $("#btn").attr("data-age");
            alert(age); //打印出：25
        }
    }

    //第二种方式获取data-name属性的值
    var fun2 = {
        GetResult: function () {
            var element = document.getElementById("btn");
            var name = element.getAttribute("data-name");
            alert(name); //打印出：张三
        }
    }
</script>