您的位置：首页 > Web前端 > HTML5

HTML5 data-* 自定义属性

2016-03-07 10:40 573 查看

<!DOCTYPE HTML>
<html>
<head>
<title>Test Demo....</title>
</head>

<body>
<div id="container">
<span class="right"
data-id = "0001"
data-title = "标题0001"
data-description = "描述0001"
data-role = "1">

Test1

</span>

<span class="right"
data-id = "0002"
data-title = "标题0002"
data-description = "描述0002"
data-role = "2">

Test2

</span>
</div>
<div id="result">

</div>
</body>

<script type="text/javascript">
var arr = document.getElementsByClassName("right");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick = function() {
var rt = '<br />';
var id = this.dataset.id;
var title = this.dataset.title;
var description = this.dataset.description;
var role = this.dataset.role;
document.getElementById("result").innerHTML = "ID: " + id + rt
+ "Title: " + title + rt
+ "Description: " + description + rt
+ "Role: " + role;
}
}
</script>

</html>

在标签中写入自定义属性

用dataset 获取自定义属性集合

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航