如果想获取这个属性值,要使用getAttribute(“自定义属性名字”)
<ul>
<li age="25">wyx</li>
<li age="29">wxy</li>
<li age="43">cxh</li>
<li age="21">lhr</li>
</ul>
<script src="common.js"></script>
<script>
//获取所有li标签
var list=document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
list[i].onclick=function(){
//alert(this.score);
alert(this.getAttribute("age"));
};
}
</script>
设置自定义属性:setAttribute(“属性的名字”,“属性的值”);
<body>
<ul>
<li age="25">wyx的年龄</li>
<li age="29">wxy的年龄</li>
<li age="43">cxh的年龄</li>
<li age="21">lhr的年龄</li>
</ul>
<script src="common.js"></script>
<script>
//根据id获取ul标签,并且获得该标签中所有的li
var list=document.getElementsByTagName("li");
//循环遍历
for(var i=0; i<list.length; i++){
//先为每个li添加自定义属性
//list[i].score=(i+1)*10; //此方式,自定义属性在DOM对象上,不在标签中
list[i].setAttribute("age", (i+1)*10);
//点击每个li标签,显示对应的自定义属性值
list[i].onclick=function(){
alert(this.getAttribute("age"));
};
}
</script>
</body>
移除自定义属性:removeAttribute
<head>
<style>
div{
width: 200px;
height: 100px;
background-color: yellow;
}
.cls{
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10" class="cls"></div>
<script src="common.js"></script>
<script>
//移除自定义属性:removeAttribute("属性的名字")
//点击按钮移除元素的自定义属性
my$("btn").onclick=function(){
//my$("dv").removeAttribute("score");
//移除元素的类样式
//值没有了,但属性还有
//my$("dv").className="";
//也可以移除元素自带属性
my$("dv").removeAttribute("class");
};
</script>
</body>