HTML n ways to achieve alternate color code sample code
|
This article mainly introduces the sample code of HTML n ways to achieve alternate color change, and shares it with you, as follows: n ways to achieve interlaced color change
<!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 ways to achieve interlaced color change</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 first method*/
/* .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 and ulList are combined in 2 ways*/
/* .bgColorYellow {
background-color: yellow;
}
.bgColorRed {
background-color: red;
}
.bgColorBlue {
background-color: blue;
} */
/* //=> bgColor and ulList are combined in 1 way*/
.bg0 {
background-color: lightcoral;
}
.bg1 {
background-color: lightgreen;
}
.bg2 {
background-color: lightskyblue;
}
#hover {
background-color: red;
}
/* We put hover after bgn, when the element's class='bgo' is mainly based on the bgo style*/
.hover {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="box" id="box">
<li>Last time we went to Chengdu, you had CDs, DVDs, VAx, VA insecticide</li>
<li>How much is the difference between the VCD deep V and the last deep V, but it is the deep V of the deep V of the DVD deep V of the deep V is the big Vsad deep V is v</li>
<li>Big SAV eats and sends SF Express</li>
<li>Safin from deep V Sa VCDVD deep V is big V Sa big V big is hair big V is big V is da but what</li>
<li>Property tax is the way to go</li>
<li>A deep V big SAV in v</li>
<li>Last time we went to Chengdu, you had CDs, DVDs, VAx, VA insecticide</li>
<!-- /*==Use CSS priority to solve: the default background color is based on the style class, and the style that the mouse moves over has a higher priority than the style class (ID
Selector/inline style) -->
</ul>
<script>
//=>Change color every three lines to highlight the selected element::Modify the class style class of the element//Style sheet: ID selector//Tag selection question//Style class selector//Inline style//These methods have priority issues: inline, ID, style class, tag...
// plan:
// 1. Traverse each li in turn, divide the index by 3 and take the remainder to make the current li have a different background color // 2. The first technique, say goodbye to one-by-one judgment, and directly use an array or directly find the corresponding style to complete // 3. Instead of traversing each li, traverse each group var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');
//*Highlight the third method:
for (var i=0; i<ulList.length; i++){
ulList[i].className = 'bg'+ (i%3);
//=>Mouse over: add a hover style class based on the original style class (since hover is at the end of the style class, its style will overwrite the original style in bg)
//=>Mouse leaves: remove the newly added hover style class ulList[i].onmouseover = function (){
this.className += 'hover'
}
ulList[i].onmouseout = function (){
// this.className = 'bg0 hover'- 'hover'; This is not string subtraction, this is a mathematical operation result (NaN)
this.className = this.className.replace('hover','');
}
}
//=>2.jsThe first method// for (var i = 0; i < ulList.length; i++) {
// //=> Analysis: i=0 first li i%3=0
// //=> i=1 first li i%3=1
// //=> i=2 first li i%3=2
// //=> i=3 first li i%3=0
// var n=i%3; //The li found in the current loop
// 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 The second method // 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 The third method colorArray+bgColorYellow...
// var colorArray = ["bgColorYellow","bgColorRed","bgColorBlue"];
// for (var i=0; i<ulList.length; i++){
//=> Analysis: i%3=0 "bgColorYellow" colorArray[0]
//=> i%3=1 "bgColorBlue" colorArray[1]
//=> i%3=2 "bgColorRed" colorArray[2]
//=> What is the remainder of i%3? This is the style class we currently need to find in the array through this index, and this style class is the class that the current li needs to set
// ulList[i].className = colorArray[i % 3];
// }
//=>5.jsThe fourth method// for (var i=0; i<ulList.length; i++){
// ulList[i].className = 'bg'+ (i%3); //=>Change the color of every three lines to modify the style class// //=>Store the original style class information in the custom attribute before changing it// ulList[i].myOldClass= ulList[i].className;
// ulList[i].onmouseover = function () {
// // Highlight selection:
// //this: the element currently being operated// //=>First method// // this.style.background = 'yellow';
// //=>Second method// // this.id = 'hover';
// //=>The third method// //=>Save the original style before setting the new style, this: The element currently being operated is also an element object with many built-in attributes. We set a custom attribute to store the original style class information. // console.dir(this);
// //=>Slide over, simply and roughly make class equal to hover
// this.className = 'hover';
// }
// ulList[i].onmouseout = function() {
// // this.style.background = '';
// // this.id = '';
// //=>Leave: restore it to the original style (the original style may be bg0, bg1, bg2)
// this.className=this.myOldClass;
// }
// }
//=>6.js The fifth way of writing the ternary operator in three ways //=>The first way of writing // function changeColor() {
// for (var i = 0 ; i< ulList.length; i++){
// ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
// }
// }
//changeColor();
//=>The second way of writing// for (var i = 0; i < ulList.length; i++) {
// var n = i % 3;
// liColor = ulList[i];
// //=>Both of the following are acceptable// // n === 0 ? liColor.style.backgroundColor = 'red' : (n === 1 ? liColor.style.backgroundColor = 'yellow' :
// // liColor.style.backgroundColor = 'pink')
//=>The third way of writing// n === 0 ? liColor.style.backgroundColor='red': n === 1 ?liColor.style.backgroundColor='yellow' : liColor.style.backgroundColor='blue';
// }
//=>7.js The sixth method//=> We loop each group once, and in the loop body, we just set the styles of the current group (it may appear that the current group is less than 3, and an error will be reported)
// 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>The operation effect is as follows:
This concludes this article about sample codes for implementing alternate line color change in HTML. For more information on alternate line color change in HTML, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: How to use vue-video-player to achieve live broadcast
>>: Detailed explanation of the process of installing MySQL on Ubuntu 18.04.4
Recommend
MySQL count detailed explanation and function example code
Detailed explanation of mysql count The count fun...
Detailed explanation of the implementation of WeChat applet track playback and the pitfalls encountered
WeChat applet trajectory playback mainly uses pol...
Summary of the differences between Mysql primary key and unique key
What is a primary key? A primary key is a column ...
Example code for implementing fullpage.js full-screen scrolling effect with CSS
When I was studying CSS recently, I found that I ...
Ubuntu 16.04 64-bit compatible with 32-bit programs in three steps
Step 1: Confirm the architecture of your system d...
Detailed explanation of how to customize the style of CSS scroll bars
This article introduces the CSS scrollbar selecto...
How to connect to MySQL database using Node-Red
To connect Node-red to the database (mysql), you ...
A brief discussion on the VUE uni-app life cycle
Table of contents 1. Application Lifecycle 2. Pag...
Comprehensive understanding of HTML basic structure
Introduction to HTML HyperText Markup Language: H...
Use of Linux stat command
1. Command Introduction The stat command is used ...
How to verify whether MySQL is installed successfully
After MySQL is installed, you can verify whether ...
Recommend some useful learning materials for newbies in web design
Many people also asked me what books I read when ...
Detailed example of using js fetch asynchronous request
Table of contents Understanding Asynchrony fetch(...
Linux Domain Name Service DNS Configuration Method
What is DNS The full name of DNS is Domain Name S...
Summary of the pitfalls you may not have encountered in WeChat applet development
Table of contents getApp() Define variables at th...