HTML n Möglichkeiten zum Erreichen eines alternativen Farbcode-Beispielcodes
|
In diesem Artikel wird hauptsächlich der Beispielcode von HTML mit Möglichkeiten zum Erreichen alternativer Farbänderungen vorgestellt und wie folgt mit Ihnen geteilt: n Möglichkeiten, einen Interlaced-Farbwechsel zu erreichen
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>n Möglichkeiten, einen Interlaced-Farbwechsel zu erreichen</title>
<Stil>
.Kasten {
Rand: 20px automatisch;
Breite: 300px;
}
.box li {
Zeilenhöhe: 35px;
Rahmen unten: 1px gestrichelt #AAA;
Polsterung: 0,5px;
Textüberlauf: Auslassungspunkte;
Leerzeichen: Nowrap;
Überlauf: versteckt;
Cursor: Zeiger;
}
/* 1.css3 erste Methode*/
/* .box li:n-ter-Typ(3n+1){
Hintergrundfarbe: grün;
}
.box li:n-ter-Typ(3n+2){
Hintergrundfarbe: rot;
}
.box li:n-ter-Typ(3n){
Hintergrundfarbe: blau;
} */
/* //=> bgColor und ulList werden auf 2 Arten kombiniert*/
/* .bgColorYellow {
Hintergrundfarbe: gelb;
}
.bgColorRed {
Hintergrundfarbe: rot;
}
.bgColorBlue {
Hintergrundfarbe: blau;
} */
/* //=> bgColor und ulList werden auf eine Art kombiniert*/
.bg0 {
Hintergrundfarbe: Hellkoralle;
}
.bg1 {
Hintergrundfarbe: hellgrün;
}
.bg2 {
Hintergrundfarbe: Hellhimmelblau;
}
#schweben {
Hintergrundfarbe: rot;
}
/* Wir setzen Hover nach bgn, wenn die Klasse „bgo“ des Elements hauptsächlich auf dem bgo-Stil basiert*/
.hover {
Hintergrundfarbe: blauviolett;
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Box" id="Box">
<li>Als wir das letzte Mal in Chengdu waren, gab es CDs, DVDs, VAx, VA-Insektizide</li>
<li>Wie groß ist der Unterschied zwischen dem tiefen V der VCD und dem letzten tiefen V, aber es ist das tiefe V des tiefen V der DVD, das tiefe V des tiefen V ist das große Vsad, das tiefe V ist v</li>
<li>Big SAV isst und schickt SF Express</li>
<li>Safin von Deep V Sa VCDVD Deep V ist groß V Sa groß V groß ist Haar groß V ist groß V ist da aber was</li>
<li>Grundsteuer ist der richtige Weg</li>
<li>Ein tiefes V, großes SAV in v</li>
<li>Als wir das letzte Mal in Chengdu waren, gab es CDs, DVDs, VAx, VA-Insektizide</li>
<!-- /*==Verwenden Sie zur Lösung die CSS-Priorität: Die Standardhintergrundfarbe basiert auf der Stilklasse, und der Stil, über den die Maus bewegt wird, hat eine höhere Priorität als die Stilklasse (ID
Selektor/Inline-Stil) -->
</ul>
<Skript>
//=>Ändern Sie alle drei Zeilen die Farbe, um das ausgewählte Element hervorzuheben::Ändern Sie die Klassenstilklasse des Elements//Stylesheet: ID-Selektor//Frage zur Tag-Auswahl//Stilklassenselektor//Inline-Stil//Diese Methoden haben Prioritätsprobleme: Inline, ID, Stilklasse, Tag …
// planen:
// 1. Durchlaufe der Reihe nach jedes li, dividiere den Index durch 3 und nimm den Rest, damit das aktuelle li eine andere Hintergrundfarbe hat. // 2. Bei der ersten Technik verabschieden Sie sich von der Einzelbeurteilung und verwenden direkt ein Array oder suchen direkt den entsprechenden Stil zum Vervollständigen. // 3. Anstatt jedes li zu durchlaufen, durchlaufen Sie jede Gruppe. var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');
//*Markieren Sie die dritte Methode:
für (var i=0; i<ulList.length; i++){
ulList[i].className = "bg"+ (i%3);
//=>Mouse over: Füge eine Hover-Stilklasse basierend auf der ursprünglichen Stilklasse hinzu (da sich Hover am Ende der Stilklasse befindet, überschreibt sein Stil den ursprünglichen Stil im Hintergrund).
//=>Maus geht: entferne die neu hinzugefügte Hover-Style-Klasse ulList[i].onmouseover = function (){
dies.Klassenname += 'hover'
}
ulList[i].onmouseout = Funktion (){
// this.className = 'bg0 hover'- 'hover'; Dies ist keine String-Subtraktion, sondern das Ergebnis einer mathematischen Operation (NaN).
dies.className = dies.className.replace('hover','');
}
}
//=>2.jsDie erste Methode// for (var i = 0; i < ulList.length; i++) {
// //=> Analyse: i=0 erstes li i%3=0
// //=> i=1 erstes li i%3=1
// //=> i=2 erstes li i%3=2
// //=> i=3 erstes li i%3=0
// var n=i%3; //Das in der aktuellen Schleife gefundene li
// liColor=ulList[i];
// wenn(n===0){
// liColor.style.backgroundColor='rot';
// }sonst wenn(n===1){
// liColor.style.backgroundColor='gelb';
// }anders {
// liColor.style.backgroundColor='pink';
// }
// }
//=>3.js Die zweite Methode // for (var i=0; i<ulList.length; i++){
// Schalter ( i % 3) {
// Fall 0:
// ulList[i].className = "bgColorYellow";
// brechen;
// Fall 1:
// ulList[i].className = "bgColorRed";
// brechen;
// Fall 2:
// ulList[i].className = "bgColorBlue";
// brechen;
// }
// }
//=>4.js Die dritte Methode colorArray+bgColorYellow…
// var Farbarray = ["bgColorYellow","bgColorRed","bgColorBlue"];
// für (var i=0; i<ulList.length; i++){
//=> Analyse: i%3=0 "bgColorYellow" colorArray[0]
//=> i%3=1 "bgColorBlue" Farbarray[1]
//=> i%3=2 "bgColorRed" Farbarray[2]
//=> Was ist der Rest von i%3? Dies ist die Stilklasse, die wir derzeit im Array über diesen Index finden müssen, und diese Stilklasse ist die Klasse, die das aktuelle li festlegen muss
// ulList[i].className = Farbarray[i % 3];
// }
//=>5.jsDie vierte Methode// for (var i=0; i<ulList.length; i++){
// ulList[i].className = 'bg'+ (i%3); //=>Ändern Sie die Farbe aller drei Zeilen, um die Stilklasse zu ändern// //=>Speichern Sie die ursprünglichen Stilklasseninformationen im benutzerdefinierten Attribut, bevor Sie sie ändern// ulList[i].myOldClass= ulList[i].className;
// ulList[i].onmouseover = Funktion () {
// // Auswahl hervorheben:
// //this: das aktuell bediente Element// //=>Erste Methode// // this.style.background = 'yellow';
// //=>Zweite Methode// // this.id = 'hover';
// //=>Die dritte Methode// //=>Speichern Sie den ursprünglichen Stil, bevor Sie den neuen Stil festlegen. Dies: Das aktuell bearbeitete Element ist auch ein Elementobjekt mit vielen integrierten Attributen. Wir legen ein benutzerdefiniertes Attribut fest, um die ursprünglichen Stilklasseninformationen zu speichern. // console.dir(this);
// //=>Drübergleiten, Klasse einfach und grob gleich Hover machen
// dieser.Klassenname = "hover";
// }
// ulList[i].onmouseout = function() {
// // dieser.Stil.Hintergrund = '';
// // diese.id = '';
// //=>Verlassen: Originalstil wiederherstellen (der Originalstil kann bg0, bg1, bg2 sein)
// dieser.Klassenname=diese.meineAlteKlasse;
// }
// }
//=>6.js Die fünfte Möglichkeit, den ternären Operator auf drei Arten zu schreiben //=>Die erste Möglichkeit, // function changeColor() { zu schreiben
// für (var i = 0; i< ulList.length; i++){
// ulList[i].style.backgroundColor = i % 3 == 0 ? 'hellblau': ((i%3 ==1)?'hellgrün':'hellrosa');
// }
// }
//Farbe ändern();
//=>Die zweite Schreibweise// for (var i = 0; i < ulList.length; i++) {
// var n = i % 3;
// liColor = ulList[i];
// //=>Beide der folgenden sind akzeptabel// // n === 0 ? liColor.style.backgroundColor = 'rot' : (n === 1 ? liColor.style.backgroundColor = 'gelb' :
// // liColor.style.backgroundColor = "pink")
//=>Die dritte Schreibweise// n === 0 ? liColor.style.backgroundColor='rot': n === 1 ?liColor.style.backgroundColor='gelb' : liColor.style.backgroundColor='blau';
// }
//=>7.js Die sechste Methode//=> Wir führen jede Gruppe einmal durch und legen im Schleifenkörper nur die Stile der aktuellen Gruppe fest (es kann den Anschein erwecken, dass die aktuelle Gruppe kleiner als 3 ist, und es wird ein Fehler gemeldet).
// var max = ulList.length - 1;
// für (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;
// }
</Skript>
</body>
</html>Der Operationseffekt ist wie folgt:
Damit ist dieser Artikel über Beispielcodes zur Implementierung von abwechselnden Zeilenfarbänderungen in HTML abgeschlossen. Weitere Informationen zu abwechselnden Zeilenfarbänderungen in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: So verwenden Sie den Vue-Video-Player für eine Live-Übertragung
>>: Detaillierte Erläuterung des Installationsprozesses von MySQL unter Ubuntu 18.04.4
Artikel empfehlen
Window.name löst das Problem der domänenübergreifenden Datenübertragung
<br />Originaltext: http://research.microsof...
Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt
1. Zunächst müssen wir zwischen der Tomcat-Protok...
So ermitteln Sie die Höhe des MySQL InnoDB B+-Baums
Vorwort Der Grund, warum die InnoDB-Engine von My...
Implementierung der Docker Compose-Mehrcontainerbereitstellung
Inhaltsverzeichnis 1. WordPress-Bereitstellung 1....
So bereinigen Sie Ihre Docker-Daten vollständig
Inhaltsverzeichnis Regelmäßig beschneiden Spiegel...
Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels
1. Reverse-Proxy-Beispiel 1 1. Erzielen Sie den E...
Beispiel für die Verwendung des href-Attributs und des onclick-Ereignisses eines Tags
Das „a“-Tag wird hauptsächlich verwendet, um Seit...
XHTML verwendet einige veraltete Elemente in HTML nicht mehr
Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...
So verwenden Sie Docker zum Erstellen einer einheitlichen OpenLDAP+phpLDAPadmin-Benutzerauthentifizierung
1. Hintergrund Verwenden Sie LDAP, um betriebs- u...
Docker erstellt Cluster-MongoDB-Implementierungsschritte
Vorwort Aufgrund der Geschäftsanforderungen des U...
Beispiel zum Entfernen eines JSON-Backslashs in PHP
1. Entfernen Sie Backslashes mit der Methode „str...
Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18
In Bezug auf die Verbindungsmethode zwischen Java...
Fallstricke bei langsamen MySQL-Abfragen
Inhaltsverzeichnis 1. Langsame Abfragekonfigurati...
Detaillierte Erklärung zur Verwendung des Canvas-Operation-Plugins fabric.js
Fabric.js ist ein sehr nützliches Plug-In für Can...
Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung
Vererbung von Prototypketten Die Prototypenvererb...