1、设置和获取特殊属性
setAttribute("score",10);设定一些DOM元素属性名特殊的属性
getAttribute("score");获取设置属性的值
2、示例
示例：五角星评分系统
静态分数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<style type="text/css">
table{
width:300px;
height:30px;
text-align: center;
border-collapse: collapse;
cursor: pointer;
}
table td{
border:solid 1px blue;
}
</style>
<script type="text/javascript">
onload = function(){
var tdObjs = document.getElementById('tb').getElementsByTagName("td");
for(var i=0;i<tdObjs.length;i++)
{
tdObjs[i].onmouseover = function(){
var score = parseInt(this.getAttribute("score"));//转换为整数
for(var j=0;j<tdObjs.length;j++)
{
if(parseInt(tdObjs[j].getAttribute("score"))<=score)//如果不转换为整数,数量超过10个时，这里就会出问题
{
tdObjs[j].textContent = "★";
tdObjs[j].style.color = "red";
}
}
};
tdObjs[i].onmouseout = function(){
for(var j=0;j<tdObjs.length;j++)
{
tdObjs[j].textContent = "☆";
tdObjs[j].style.color = "";
}
};
tdObjs[i].onclick=function(){
var score = this.getAttribute("score");
alert("当前分数为："+score+"分");
};
}
};
</script>
</head>
<body>
<table id="tb">
<tr>
<td score="10">☆</td>
<td score="20">☆</td>
<td score="30">☆</td>
<td score="40">☆</td>
<td score="50">☆</td>
</tr>
</table>
</body>
</html>
效果图
动态分数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Javascript测试</title> <style type="text/css"> table{ width:300px; height:30px; text-align: center; border-collapse: collapse; cursor: pointer; } table td{ border:solid 1px blue; } </style> <script type="text/javascript"> onload = function(){ var tdObjs = document.getElementById('tb').getElementsByTagName("td"); for(var i=0;i<tdObjs.length;i++) { tdObjs[i].setAttribute("score",(i+1)*10); } for(var i=0;i<tdObjs.length;i++) { tdObjs[i].onmouseover = function(){ var score = parseInt(this.getAttribute("score"));//转换为整数 for(var j=0;j<tdObjs.length;j++) { if(parseInt(tdObjs[j].getAttribute("score"))<=score)//如果不转换为整数,数量超过10个时，这里就会出问题 { tdObjs[j].textContent = "★"; tdObjs[j].style.color = "red"; } } }; tdObjs[i].onmouseout = function(){ for(var j=0;j<tdObjs.length;j++) { tdObjs[j].textContent = "☆"; tdObjs[j].style.color = ""; } }; tdObjs[i].onclick=function(){ var score = this.getAttribute("score"); alert("当前分数为："+score+"分"); }; } }; </script></head><body> <table id="tb"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> </tr> </table></body></html>
效果图
