Implementierungscode der Front-End-HTML-Skin-Änderungsfunktion

50 Zeilen Code zum Ändern von 5 Hautfarben, einschließlich transparent

Ich gebe dir vorab den Code, den kannst du selbst verwenden. Erstellen Sie einfach eine HTML-Datei und fügen Sie sie ein, um sie zu verwenden. Sie können sie nicht einfach so verwenden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
	<meta charset="UTF-8">
	<title>Dokument</title>
	<Stil>
	#box{Breite: 100%;Höhe:100%;Hintergrundfarbe: rot;Position: absolut;oben:0;links:0;rechts:0;unten:0;}
	#box>div{float:right;Breite: 30px;Höhe: 30px;Rand:10px;Rahmen: 1px #333 durchgezogen;}
	#box1{Hintergrundfarbe: rot}
	#box2{Hintergrundfarbe: gelb}
	#box3{Hintergrundfarbe: blau}
	#box4{Hintergrundfarbe: grün}
	</Stil>
</Kopf>
<Text>
	<div id="box">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</body>
<Skript>
	var box = document.getElementById('box');
	var box1 = document.getElementById('box1');
	var box2 = document.getElementById('box2');
	var box3 = document.getElementById('box3');
	var box4 = document.getElementById('box4');
	var box5 = document.getElementById('box5');
	box1.onclick = Funktion(){
		box.style.backgroundColor = "rot";
	}
	box2.onclick = Funktion(){
		box.style.backgroundColor = "gelb";
	}
	box3.onclick = Funktion(){
		box.style.backgroundColor = "blau";
	}
	box4.onclick = Funktion(){
		box.style.backgroundColor = "grün";
	}
	box5.onclick = Funktion(){
		box.style.backgroundColor = "transparent";
	}
</Skript>
</html>

Der Code ist kompakt und leicht verständlich.

Ich werde nicht über die grundlegenden HTML-Tags sprechen, sondern zuerst über den Textstil unter dem Textkörper.

<Text>
	<div id="box">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</body>

Schließlich verwenden wir JS. Wenn wir es hier mit „id“ benennen, können wir später weniger Code schreiben.

Bildbeschreibung hier einfügen

Diese große rote Box ist #box. Ich habe ihr eine Standardfarbe hinzugefügt. Wenn keine Farbe hinzugefügt wird, ist sie transparent.
Ich habe jedem Kästchen Ränder hinzugefügt, um die Unterscheidung der Blöcke zu erleichtern.

Bildbeschreibung hier einfügen

Es gibt einen Unterschied zwischen dem ersten und dem vierten. Der Unterschied besteht darin, dass die Farbe des ersten transparent ist, während die Farbe des zweiten rot ist – dieselbe wie die Grundfarbe.

<Stil>
	#box{Breite: 400px;
	Höhe: 400px; Hintergrundfarbe: rot; Rand: 1px #000 durchgezogen;}
	#box>div{float:right;Breite: 30px;
	Höhe: 30px; Rand: 10px; Rahmen: 1px #333 durchgezogen;}
	#box1{Hintergrundfarbe: rot}
	#box2{Hintergrundfarbe: gelb}
	#box3{Hintergrundfarbe: blau}
	#box4{Hintergrundfarbe: grün}
	#box5{}
	</Stil>

Dies ist der CSS-Stil.

Breite: Breite der Box festlegen; Höhe: Höhe der Box festlegen; Hintergrundfarbe: Hintergrundfarbe der Box festlegen; Rahmen: Rahmen der Box festlegen
(1px ist die Dicke des Rahmens, #333 ist die hexadezimale Farbe, solid ist der Rahmenstil, solid stellt eine durchgezogene Linie dar); float: ist schwebend
(Der Boden der Box ist mit Wasser gefüllt und die Box schwimmt; links bedeutet nach links schwimmen und rechts bedeutet nach rechts schwimmen); Rand: ist der äußere Rand
(Kisten lassen sich nicht gerne zusammendrücken. Um ein Zusammendrücken zu vermeiden, lassen wir etwas Abstand zu allem, was sich darüber, darunter, links oder rechts befindet.)

Rot ist Rot; Gelb ist Gelb; Blau ist Blau; Grün ist Grün

var box = document.getElementById('box');
	var box1 = document.getElementById('box1');
	var box2 = document.getElementById('box2');
	var box3 = document.getElementById('box3');
	var box4 = document.getElementById('box4');
	var box5 = document.getElementById('box5');

Dies ist ein DOM-Selektor, der zum leichteren Verständnis jedes Feld einzeln auswählt. Wenn Sie alle Kästchen ankreuzen möchten,
var Boxen = Box.SelectorAll('div');
Dieser Satz wählt alle

box1.onclick = Funktion(){
		box.style.backgroundColor = "rot";
	}

Die Bedeutung dieses Satzes ist:
Wählen Sie die Box aus, die Sie bedienen möchten

Bildbeschreibung hier einfügen

Es ist das Letzte – das kleine rote Quadrat.

Der Box wird ein Klickereignis (onclick) gegeben, function(){} ist die auszuführende Funktion.

Wenn box1 angeklickt wird, funktioniert die Box(){}

Das ist leicht zu verstehen. Schauen wir uns also an, was in function(){} steckt.

Bildbeschreibung hier einfügen
Es ist so einfach, nur dieser eine Satz.
Dieser Satz bedeutet, die Hintergrundfarbe der Box auf Rot zu ändern.

Stil: Stil, Stil; Hintergrundfarbe: Hintergrundfarbe; (In JS, " - "
Da es normalerweise nicht normal verwendet werden kann, wird es durch den Anfangsbuchstaben des nächsten Wortes mit Großbuchstaben ersetzt, und zwar:
Hintergrundfarbe ==> Hintergrundfarbe );

Finale:

box.style.backgroundColor = "transparent";

Der hier angegebene Wert für „transparent“ ist der Standardwert für die Hintergrundfarbe. Wenn Sie ihn so schreiben, wird sein ursprüngliches Erscheinungsbild wiederhergestellt, nämlich transparent.

Zusammenfassen

Dies ist das Ende dieses Artikels über den Implementierungscode der Funktion zum Ändern des Front-End-HTML-Skins. Weitere relevante Inhalte zum Ändern des Front-End-HTML-Skins finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode

>>: So verbergen Sie Elemente im Web und ihre Vor- und Nachteile

MySql 8.0.11 Installations- und Konfigurationstutorial

Implementierungscode der Front-End-HTML-Skin-Änderungsfunktion

MySql 8.0.11 Installations- und Konfigurationstutorial

Eine kurze Erläuterung, wo das vom Knoten mithilfe von JWT generierte Token gespeichert werden soll

So legen Sie Hintergrundfarbe und Transparenz in Vue fest

So löschen Sie schnell alle Tabellen in MySQL, ohne die Datenbank zu löschen

Detailliertes Tutorial zur Installation der komprimierten Version von MySQL 8.0.11 unter Win10

Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

Über Vue, um wiederholte Eingabeaufforderungen beim Aktualisieren der Seite nach Ablauf des Tokens zu vermeiden

So kapseln Sie Abfragekomponenten basierend auf Element-UI Schritt für Schritt

Docker löscht private Bibliotheksbilder vollständig

Artikel empfehlen

So installieren Sie MySQL über SSH auf einem CentOS VPS

Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts

Zusammenfassung von sieben in JavaScript implementierten Sortieralgorithmen (empfohlen!)

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Detaillierte Erläuterung der Verwendung und der zugrunde liegenden Prinzipien von MySQL-Tabellenpartitionen

Grafisches Tutorial zur Installation von MySQL 5.5.27

Chrome 4.0 unterstützt GreaseMonkey-Skripte

Eine detaillierte Erklärung, wie React Fiber funktioniert

Nach dem Klickereignis des HTML-Hyperlinks a wird zur Adresse gesprungen, auf die href zeigt.

Implementierung der Formularübermittlung in HTML

Tipps zum Erstellen von Web-Tabellenrahmen

Einführung in die MySQL-Methode zum Löschen von Tabellendaten mit Fremdschlüsseleinschränkungen

Lösung für Nginx, das nicht zur Upstream-Adresse springt

So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen

Zwei Möglichkeiten zum Exportieren von CSV in Win10 MySQL