HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼
發(fā)布時(shí)間：2020-06-17 16:24:47 作者：公子清 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼，分享給大家，具體如下：
n種方式實(shí)現(xiàn)隔行變色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>n種方式實(shí)現(xiàn)隔行變色</title>
<style>
.box {
margin: 20px auto;
width: 300px;
}
.box li {
line-height: 35px;
border-bottom: 1px dashed #AAA;
padding: 0 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
/* 1.css3第一種方式 */
/* .box li:nth-of-type(3n+1){
background-color: green;
}
.box li:nth-of-type(3n+2){
background-color: red;
}
.box li:nth-of-type(3n){
background-color: blue;
} */
/* //=> bgColor與ulList組合2種方式實(shí)現(xiàn) */
/* .bgColorYellow {
background-color: yellow;
}
.bgColorRed {
background-color: red;
}
.bgColorBlue {
background-color: blue;
} */
/* //=> bgColor與ulList組合1種方式實(shí)現(xiàn) */
.bg0 {
background-color: lightcoral;
}
.bg1 {
background-color: lightgreen;
}
.bg2 {
background-color: lightskyblue;
}
#hover {
background-color: red;
}
/* 我們把hover放在bgn的后面，當(dāng)元素的class=‘bgo’以bgo樣式為主 */
.hover {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="box" id="box">
<li>上次大家成都你cdsvdvd vax v a 殺蟲(chóng)水</li>
<li>撒差多少VCD深V上次的深V但是是的深V的深V是DVD深V的深V的深V是大Vsad深V是的v</li>
<li>大SAV吃撒撒發(fā)順豐</li>
<li>薩芬從深V撒VCDVD深V是大V撒大V大是發(fā)大V是大V是噠但是啥的 </li>
<li>撒房產(chǎn)稅才是</li>
<li>阿深V大SAV的在v</li>
<li>上次大家成都你cdsvdvd vax v a 殺蟲(chóng)水</li>
<!-- /*==利用css優(yōu)先級(jí)搞定：默認(rèn)背景顏色基于樣式類(lèi)完成，鼠標(biāo)滑過(guò)的樣式比樣式類(lèi)優(yōu)先級(jí)高一些（ID
選擇器/行內(nèi)樣式） -->
</ul>
<script>
//=>隔三行變色高亮選中：:修改元素的class樣式類(lèi)
// 樣式表: ID選擇器
// 標(biāo)簽選擇題
// 樣式類(lèi)選擇器
// 行內(nèi)樣式
// 這些方式存在優(yōu)先級(jí)的問(wèn)題:行內(nèi)，ID，樣式類(lèi)，標(biāo)簽...
// 方案：
// 1.依次遍歷每一個(gè)li，通過(guò)索引除以3取余數(shù)，讓當(dāng)前的li有不同的背景色
// 2.第一種的技巧，告別一個(gè)個(gè)的判斷，直接采用數(shù)組或者直接找到對(duì)應(yīng)的樣式的方式來(lái)完成
// 3.不是遍歷每一個(gè)li，而是遍歷每一組
var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');
//*高亮第3種方式：
for (var i=0; i<ulList.length; i++){
ulList[i].className = 'bg'+ (i%3);
//=>鼠標(biāo)滑過(guò)：在原有樣式類(lèi)基礎(chǔ)上累加一個(gè)hover樣式類(lèi)（由于hover在樣式類(lèi)中靠后，它的樣式會(huì)覆蓋原有的bg中的樣式）
//=>鼠標(biāo)離開(kāi)：把新增的hover樣式類(lèi)移除掉即可
ulList[i].onmouseover = function (){
this.className += 'hover'
}
ulList[i].onmouseout = function (){
// this.className = 'bg0 hover'- 'hover';這不是字符串相減，這是數(shù)學(xué)運(yùn)算結(jié)果是（NaN）
this.className = this.className.replace('hover','');
}
}
//=>2.js第一種方式
// for (var i = 0; i < ulList.length; i++) {
// //=> 分析：i=0 第一個(gè)li i%3=0
// //=> i=1 第一個(gè)li i%3=1
// //=> i=2 第一個(gè)li i%3=2
// //=> i=3 第一個(gè)li i%3=0
// var n=i%3; //當(dāng)前循環(huán)找出來(lái)的那個(gè)li
// liColor=ulList[i];
// if(n===0){
// liColor.style.backgroundColor='red';
// }else if(n===1){
// liColor.style.backgroundColor='yellow';
// }else {
// liColor.style.backgroundColor='pink';
// }
// }
//=>3.js第二種方式
// for (var i=0; i<ulList.length; i++){
// switch ( i % 3) {
// case 0:
// ulList[i].className = "bgColorYellow";
// break;
// case 1:
// ulList[i].className = "bgColorRed";
// break;
// case 2:
// ulList[i].className = "bgColorBlue";
// break;
// }
// }
//=>4.js第三種方式 colorArray+bgColorYellow...
// var colorArray = ["bgColorYellow","bgColorRed", "bgColorBlue"];
// for (var i=0; i<ulList.length; i++){
//=> 分析： i%3=0 "bgColorYellow" colorArray[0]
//=> i%3=1 "bgColorBlue" colorArray[1]
//=> i%3=2 "bgColorRed" colorArray[2]
//=> i%3的余數(shù)是多少？就是我們當(dāng)前需要到數(shù)組中通過(guò)此索引找到的樣式類(lèi)，而這個(gè)樣式類(lèi)則是當(dāng)前l(fā)i需要設(shè)置的class
// ulList[i].className = colorArray[i % 3];
// }
//=>5.js第四種方式
// for (var i=0; i<ulList.length; i++){
// ulList[i].className = 'bg'+ (i%3); //=>隔三行變色修改樣式類(lèi)
// //=>在改變之前把原有的樣式類(lèi)信息存儲(chǔ)到自定義屬性中
// ulList[i].myOldClass= ulList[i].className;
// ulList[i].onmouseover = function () {
// // 高亮選中：
// //this:當(dāng)前操作的元素
// //=>第一種方法
// // this.style.background = 'yellow';
// //=>第二種方法
// // this.id = 'hover';
// //=>第三種方法
// //=>設(shè)置新樣式之前把原有的樣式保存起來(lái),this:當(dāng)前操作的元素也是一個(gè)元素對(duì)象，有很多內(nèi)置屬性，我們?cè)O(shè)置一個(gè)自定義屬性，把原有的樣式類(lèi)信息存儲(chǔ)進(jìn)來(lái)
// console.dir(this);
// //=>滑過(guò)，簡(jiǎn)單粗暴的讓class等于hover
// this.className = 'hover';
// }
// ulList[i].onmouseout = function() {
// // this.style.background = '';
// // this.id = '';
// //=>離開(kāi)：讓其還原為原有的樣式（原有的樣式可能是bg0,bg1,bg2）
// this.className=this.myOldClass;
// }
// }
//=>6.js第五種方式三元運(yùn)算符三種寫(xiě)法
//=>第一種寫(xiě)法
// function changeColor() {
// for (var i = 0 ; i< ulList.length; i++){
// ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
// }
// }
// changeColor();
//=>第二種寫(xiě)法
// for (var i = 0; i < ulList.length; i++) {
// var n = i % 3;
// liColor = ulList[i];
// //=>以下兩種都可以
// // n === 0 ? liColor.style.backgroundColor = 'red' : (n === 1 ? liColor.style.backgroundColor = 'yellow' :
// // liColor.style.backgroundColor = 'pink')
//=>第三種寫(xiě)法
// n === 0 ? liColor.style.backgroundColor='red': n === 1 ?liColor.style.backgroundColor='yellow' : liColor.style.backgroundColor='blue';
// }
//=>7.js第六種方式
//=>我們每一組循環(huán)一次，在循環(huán)體中，我們把當(dāng)前這一組樣式都設(shè)置好即可（可能出現(xiàn)當(dāng)前這一組不夠3個(gè)，就報(bào)錯(cuò)了）
// var max = ulList.length - 1;
// for (var i=0;i<ulList.length;i+=3){
// ulList[i].style.background='bg0';
// i + 1 <= max ? ulList[i+1].style.background='bg1':null;
// i + 2 <= max ? ulList[i+2].style.background='bg2':null;
// }
</script>
</body>
</html>
運(yùn)行效果如下：
到此這篇關(guān)于HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼的文章就介紹到這了,更多相關(guān)HTML隔行變色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 想必大家對(duì)隔行變換色的概念都不陌生了吧，其實(shí)css3也是可以實(shí)現(xiàn)的，下面為大家詳細(xì)介紹下2014-02-19
CSS表格樣式：圓角，隔行，變色的具體實(shí)現(xiàn)
常見(jiàn)的CSS表格樣式有圓角、隔行、變色等等，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-30- 單一的表格很容易使人感到枯燥，使用變色效果可以使得表格看起來(lái)更加舒適，在本文將為大家介紹下使用css實(shí)現(xiàn)隔行變色顯示，感興趣的朋友可以參考下2013-10-05
- CSS expression 隔行換色效果實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-12-13
網(wǎng)頁(yè)設(shè)計(jì)制作CSS實(shí)現(xiàn)隔行換色兩種方法-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
網(wǎng)頁(yè)設(shè)計(jì)制作,CSS實(shí)現(xiàn)隔行換色兩種方法: 第一種方法: 以下為引用的內(nèi)容： <style type="text/css"> UL.myul12008-10-17CSS實(shí)現(xiàn)網(wǎng)頁(yè)中的隔行換色代碼-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
以前在Dreamweaver中用表格布局網(wǎng)頁(yè)的時(shí)候常常用到一種設(shè)計(jì)手法--隔行換色。也就是新聞列表或是列表類(lèi)的每隔一行就換另一個(gè)色彩這樣顯得很漂亮也很合適閱讀。所以這種2008-10-17CSS網(wǎng)頁(yè)隔行換色技巧-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS隔行換色的問(wèn)題，其實(shí)很簡(jiǎn)單，您可以根據(jù)您的需要，采用下面的任何一種方法，當(dāng)然，要適合你的編碼與需求情況： 一、background背景圖片 如果行高固定的話(huà)，推2008-10-17