js实现页面动态显示星级评价

最近做了一个页面显示了一条数据详细信息的星级评价，自己在网上也查找了相关资料，最后实现了如下效果，做个笔记：

1.css

 .dim{/*默认是灰色的星星*/
    float: left;
	width: 20px;
	height: 20px;
	background: url('../plug-in/score/img/start1.png');
	background-size: 100%;
  }
  .highlight{/*评论是几就会点亮几颗星星*/
    float: left;
	width: 20px;
	height: 20px;
	background: url('../plug-in/score/img/start2.png');
	background-size: 100%;
  }

2.显示评分的区域：

 <div class="commentScore" id="starContainer">
							    <a  class="dim"></a>
							    <a  class="dim"></a>
							    <a  class="dim"></a>
							    <a  class="dim"></a>
						        <a  class="dim"></a>
					        </div>

3.js部分：

  /**默认显示当前数据的处理状态*/
		$(document).ready(function() {
			  var score='${reservationPage.commentScore}';//用户评分
			 
		         /*调用方法，想要亮几颗就传入几*/
		        highlightStar(score);
			 
		});
		function highlightStar(num){
		    var starBg = document.getElementById("starContainer");
		    var stars = starBg.getElementsByTagName("a");
		    for(var i = 0 ; i < num ; i++){
		        stars[i].className = 'highlight';
		    }
		}