域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)
這篇文章主要介紹了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)文章,希望大家以后多多支持腳本之家!
來(lái)源:腳本之家
鏈接:https://www.jb51.net/web/731071.html
申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!