H5自定义属性
2018-07-27 本文已影响0人
追逐_chase
自定义属性
- 1.自定义属性 data-开头 后面跟上属性名称
-
data-user =>userdata-user-age =>userAge浏览器会自动解析
-
- 3.要遵循驼峰命名
-
element.dataset获取自定义属性的集合
-
- 5.设置属性
element.setAttribute("data-age","15"); - 6.获取属性
element.getAttribute("data-age")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
</head>
<body>
<ul id="list"></ul>
</body>
</html>
<script type="text/javascript">
//获取到
var list = document.getElementById("list");
//创建数据
var data = {"01":{
name:"CC",
age:18
},
"02":{
name:"CC1",
age:15
},
"03":{
name:"CC2",
age:15
}
}
for (var key in data){
//json数据
var item = data[key];
//创建li标签
var li = document.createElement("li");
//给li设置
li.innerHTML = item.name;
//设置属性
li.setAttribute("data-age",item.age);
//添加
list.appendChild(li);
//添加事件
li.addEventListener("click",function () {
console.log(this.dataset);
console.log(this.getAttribute("data-age"));
})
}
</script>
- dataset属性集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
<style>
.cla {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="cla" data-user = "CC" data-user-age = "18"></div>
<!--<div data-user="wl" data-user-age="18"></div>-->
</body>
</html>
<script type="text/javascript">
var div = document.querySelector("div");
var attar = div.dataset;
//获取单个属性
console.log(attar.user);
//设置属性值
attar.user = "哈哈哈";
console.log(attar.user);
</script>
