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

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

Artikel empfehlen

JS implementiert einfachen Beispielcode zur Steuerung der Videowiedergabegeschwindigkeit

Einführung Ich habe schon einmal ein Problem fest...

Datenstruktur - Baum (III): Mehrweg-Suchbaum B-Baum, B+ Baum

Mehrweg-Suchbaum Höhe eines vollständigen Binärba...

Tencent-Interview: Was sind die Gründe, warum eine SQL-Anweisung sehr langsam ausgeführt wird? ---Sehen Sie sich die Serie „Regret“ nicht an (empfohlen)

Ehrlich gesagt erfordert diese Frage eine Menge g...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.15 (Windows)

Da ich MySQL installieren muss, zeichne ich den I...

Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

1. Berechnete Eigenschaften und Listener 1.1 Bere...

Detaillierte Erklärung dieser Zeigerfunktion in JS

Die Pfeilfunktion ist eine neue Funktion in ES6. ...

Verständnis und Anwendungsszenarien von ES6-Erweiterungsoperatoren

Inhaltsverzeichnis 1. Ersetzen Sie die Apply-Meth...

So aktualisieren Sie den Kernel in Deepin Linux manuell

deepin und Ubuntu sind beides auf debian basieren...

Detaillierte Erklärung der Verwendung von Reduce Fold Unfold in JS

Inhaltsverzeichnis falten (reduzieren) Verwenden ...

Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token

Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...

Webdesign-Tutorial (2): Über Nachahmung und Plagiat

<br />Im vorherigen Artikel habe ich die Sch...

Das Phänomen des Margin-Top-Collapses und die spezifische Lösung

Was ist ein Margin-Top-Collaps? Der Margin-Top-Co...

Einführung in die Leistungsoptimierung von MySQL-Datenbanken

Inhaltsverzeichnis Warum optimieren? ? Wo soll ic...

So installieren Sie MySQL 8.0.13 in Alibaba Cloud CentOS 7

1. Laden Sie das MySQL-Installationspaket herunte...

6 Möglichkeiten, die von Linux-Prozessen belegten Portnummern anzuzeigen

Für Linux-Systemadministratoren ist es von entsch...