這篇文章主要介紹了HTML n種方式實現(xiàn)隔行變色的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了HTML n種方式實現(xiàn)隔行變色的示例代碼，分享給大家，具體如下：
n種方式實現(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種方式實現(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種方式實現(xiàn) */
/* .bgColorYellow {
background-color: yellow;
}
.bgColorRed {
background-color: red;
}
.bgColorBlue {
background-color: blue;
} */
/* //=> bgColor與ulList組合1種方式實現(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 殺蟲水</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 殺蟲水</li>
<!-- /*==利用css優(yōu)先級搞定：默認背景顏色基于樣式類完成，鼠標(biāo)滑過的樣式比樣式類優(yōu)先級高一些（ID
選擇器/行內(nèi)樣式） -->
</ul>
<script>
//=>隔三行變色高亮選中：:修改元素的class樣式類
// 樣式表: ID選擇器
// 標(biāo)簽選擇題
// 樣式類選擇器
// 行內(nèi)樣式
// 這些方式存在優(yōu)先級的問題:行內(nèi)，ID，樣式類，標(biāo)簽...
// 方案：
// 1.依次遍歷每一個li，通過索引除以3取余數(shù)，讓當(dāng)前的li有不同的背景色
// 2.第一種的技巧，告別一個個的判斷，直接采用數(shù)組或者直接找到對應(yīng)的樣式的方式來完成
// 3.不是遍歷每一個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)滑過：在原有樣式類基礎(chǔ)上累加一個hover樣式類（由于hover在樣式類中靠后，它的樣式會覆蓋原有的bg中的樣式）
//=>鼠標(biāo)離開：把新增的hover樣式類移除掉即可
ulList[i].onmouseover = function (){
this.className += 'hover'
}
ulList[i].onmouseout = function (){
// this.className = 'bg0 hover'- 'hover';這不是字符串相減，這是數(shù)學(xué)運算結(jié)果是（NaN）
this.className = this.className.replace('hover','');
}
}
//=>2.js第一種方式
// for (var i = 0; i < ulList.length; i++) {
// //=> 分析：i=0 第一個li i%3=0
// //=> i=1 第一個li i%3=1
// //=> i=2 第一個li i%3=2
// //=> i=3 第一個li i%3=0
// var n=i%3; //當(dāng)前循環(huán)找出來的那個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ù)組中通過此索引找到的樣式類，而這個樣式類則是當(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); //=>隔三行變色修改樣式類
// //=>在改變之前把原有的樣式類信息存儲到自定義屬性中
// ulList[i].myOldClass= ulList[i].className;
// ulList[i].onmouseover = function () {
// // 高亮選中：
// //this:當(dāng)前操作的元素
// //=>第一種方法
// // this.style.background = 'yellow';
// //=>第二種方法
// // this.id = 'hover';
// //=>第三種方法
// //=>設(shè)置新樣式之前把原有的樣式保存起來,this:當(dāng)前操作的元素也是一個元素對象，有很多內(nèi)置屬性，我們設(shè)置一個自定義屬性，把原有的樣式類信息存儲進來
// console.dir(this);
// //=>滑過，簡單粗暴的讓class等于hover
// this.className = 'hover';
// }
// ulList[i].onmouseout = function() {
// // this.style.background = '';
// // this.id = '';
// //=>離開：讓其還原為原有的樣式（原有的樣式可能是bg0,bg1,bg2）
// this.className=this.myOldClass;
// }
// }
//=>6.js第五種方式三元運算符三種寫法
//=>第一種寫法
// function changeColor() {
// for (var i = 0 ; i< ulList.length; i++){
// ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
// }
// }
// changeColor();
//=>第二種寫法
// 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')
//=>第三種寫法
// 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個，就報錯了）
// 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>
運行效果如下：
到此這篇關(guān)于HTML n種方式實現(xiàn)隔行變色的示例代碼的文章就介紹到這了,更多相關(guān)HTML隔行變色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/web/731071.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
