使用JavaScript和CSS實現文本隔行換色的方法_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:45:06

使用JavaScript和CSS實現文本隔行換色的方法_javascript技巧

使用JavaScript和CSS實現文本隔行換色的方法_javascript技巧:先來看一個簡單的方法。在 css 中定義兩種樣式 .odd{...} 和 .even{...} 分別用于奇數行和偶數行的不同背景顏色。在網頁加載后通過 javascript 獲取要變色的標簽列表，執行如下代碼： // 當文件加載時，執行代碼。 window.onload = fu

推薦度：

點擊下載本文 文檔為doc格式

導讀使用JavaScript和CSS實現文本隔行換色的方法_javascript技巧:先來看一個簡單的方法。在 css 中定義兩種樣式 .odd{...} 和 .even{...} 分別用于奇數行和偶數行的不同背景顏色。在網頁加載后通過 javascript 獲取要變色的標簽列表，執行如下代碼： // 當文件加載時，執行代碼。 window.onload = fu

先來看一個簡單的方法。
在 css 中定義兩種樣式 .odd{...} 和 .even{...} 分別用于奇數行和偶數行的不同背景顏色。在網頁加載后通過 javascript 獲取要變色的標簽列表，執行如下代碼：

// 當文件加載時，執行代碼。
window.onload = function() {
 // 獲取對象
 var list = document.getElementById('list');
 // 獲取list下面的所有li
 var items = list.getElementsByTagName('li');
 // 遍歷items
 for (var i = 0; i < items.length; i++) {
 var className = (i % 2 == 0) ? ' odd' : ' even';
 items[i].className += className; 
 }
}

實現不同行的不同顏色，這樣變完全在前端處理，不會與后端的邏輯混淆，是一種比較好的解決方案。
那么這種代碼實現起來效果基本上是這樣的：

2015114150851266.png (760×261)