JavaScript隔行變色效果

admin發表於2018-01-08
JavaScript

隔行變色效果在眾多網站有應用，在列表條數比較多的情況下特別有效，提高了行與行之間的辨識度。純CSS實現隔行變色當前存在一定瀏覽器相容性問題，使用JavaScript實現更為穩妥。

CSS實現可以參閱CSS表格隔行變色詳解一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:400px;
  height:300px;
}
ul{list-style:none;}
ul li {
  height:25px;
  line-height:25px;
  font-size:12px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){ 
  var mylist=document.getElementById("list").getElementsByTagName("li"); 
  var listlen=mylist.length; 
  for(var i=0;i<listlen;i++) { 
    if(i%2==0) { 
      mylist[i].style.backgroundColor="#639"; 
    } 
  }     
} 
</script>
</head>
<body>
<div>
  <ul id="list">
    <li>大家好，歡迎來到螞蟻部落</li>
    <li>div+css教程</li>
    <li>希望明天會更好，因為我們奮鬥了</li>
    <li>春天是生機勃勃的，一切充滿希望。</li>
    <li>時間不會因為我們的懶惰而停止</li>
  </ul>
</div>
</body>
</html>

相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.getElementsByTagName()參閱JavaScript getElementsByTagName()一章節。

相關文章