HTML data-*自定義屬性
阿新 • • 發佈：2019-02-09
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>