目录
1.getAttribute("自定义属性的名字") 获取自定义属性的值
2.setAttribute("属性的名字","属性的值"); 设置自定义属性的值
3.removeAttribute("属性的名字") 移除自定义属性
0.码仙励志
一个人的成功不取决于他的智慧，而是毅力
1.getAttribute("自定义属性的名字") 获取自定义属性的值
案例：点击li获取成绩
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
</head>
</head>
<body>
<ul id="uu">
<li score="10">喜羊羊的成绩</li>
<li score="20">美羊羊的成绩</li>
<li score="30">懒羊羊的成绩</li>
<li score="40">沸羊羊的成绩</li>
<li score="50">暖羊羊的成绩</li>
</ul>
<script>
//html标签中有没有什么自带的属性可以存储成绩的----没有
//本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据
//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值
//获取所有的li标签
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
//alert(this.score);//不能
alert(this.getAttribute("score")); //可以
};
}
</script>
</body>
2.setAttribute("属性的名字","属性的值"); 设置自定义属性的值
案例：先设置li的成绩，再点击li获取成绩
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
</head>
</head>
<body>
<ul id="uu">
<li>喜羊羊的成绩</li>
<li>美羊羊的成绩</li>
<li>懒羊羊的成绩</li>
<li>沸羊羊的成绩</li>
<li>暖羊羊的成绩</li>
</ul>
<script>
//总结:设置自定义属性:setAttribute("属性的名字","属性的值");
//获取自定义属性的值:getAttribute("属性的名字")
//获取所有的li标签,然后为每个标签中动态的添加自定义属性和值
//点击的时候获取该标签的自定义属性的值
//根据id获取ul标签,并且或者该标签中所有的li
var list = document.getElementById("uu").getElementsByTagName("li");
//循环遍历
for (var i = 0; i < list.length; i++) {
//先为每个li添加自定义属性
//list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
list[i].setAttribute("score", (i + 1) * 10);
//点击每个li标签,显示对应的自定义属性值
list[i].onclick = function () {
alert(this.getAttribute("score"));
};
}
</script>
</body>3.removeAttribute("属性的名字") 移除自定义属性
list[i].removeAttribute("score"); 移除元素的类样式 list[i].setAttribute("score", ""); 移除元素的值，样式还在 也可以移除元素的自带的属性
案例：点击按钮移除元素的自定义属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" value="移除自定义属性" id="btn"/>
<ul id="uu">
<li score="10">喜羊羊的成绩</li>
<li score="20">美羊羊的成绩</li>
<li score="30">懒羊羊的成绩</li>
<li score="40">沸羊羊的成绩</li>
<li score="50">暖羊羊的成绩</li>
</ul>
<script>
//点击按钮移除元素的自定义属性
document.getElementById("btn").onclick = function () {
//获取所有的li标签
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].removeAttribute("score");
}
};
</script>
</body>
