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.
Diese große rote Box ist #box. Ich habe ihr eine Standardfarbe hinzugefügt. Wenn keine Farbe hinzugefügt wird, ist sie transparent.
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.
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,
box1.onclick = Funktion(){
box.style.backgroundColor = "rot";
} Die Bedeutung dieses Satzes ist:
Es ist das Letzte – das kleine rote Quadrat.
Wenn box1 angeklickt wird, funktioniert die Box(){} Das ist leicht zu verstehen. Schauen wir uns also an, was in function(){} steckt.
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
Einführung in den Unterschied zwischen On- und Where-Bedingungen in der MySQL-Left-Join-Operation
Priorität Der Grund, warum das Platzieren derselb...
Einige Möglichkeiten zum Eliminieren doppelter Zeilen in MySQL
SQL-Anweisung /* Einige Methoden zum Eliminieren ...
nginx löst das Problem der langsamen Bildanzeige und des unvollständigen Downloads
Vorne geschrieben Kürzlich berichtete mir ein Les...
Beispielcode zum Konfigurieren von Nginx zur Unterstützung von https
1. Einleitung Lassen Sie Ihre Website immer noch ...
Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port
Apache: Virtuellen Host basierend auf Port erstel...
Tutorial zu HTML-Tabellen-Tags (3): Breiten- und Höhenattribute WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Tabelle ...
So zeigen Sie den Rahmen an, wenn td leer ist
Zuvor habe ich zusammengefasst, wie man mit CSS di...
So lösen Sie das Problem des verstümmelten DOS-Fensters in MySQL
Das Problem mit dem verstümmelten Code ist folgen...
Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus
Vorwort: rm unter Linux-Systemen ist irreversibel...
Docker stellt über einen Port eine Verbindung zu einem Container her
Docker-Container-Verbindung 1. Netzwerk-Port-Mapp...
JS + Canvas realisiert dynamischen Uhreffekt
Eine auf Canvas basierende Demo einer dynamischen...
MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht
Nachfragehintergrund Ein Teil der Daten in der Ge...
Der Unterschied zwischen redundanten und doppelten Indizes in MySQL
MySQL ermöglicht das Erstellen mehrerer Indizes f...
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Verwendete APIs Einfaches Beis...
XHTML-Tags haben ein schließendes Tag
<br />Ursprünglicher Link: http://www.dudo.o...