HTML data-*自定义属性

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/51835574

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 onclick="fun.GetResult()">获取data-age的值</button>
        <button onclick="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>




展开阅读全文

没有更多推荐了,返回首页