Heim >Web-Frontend >js-Tutorial >JavaScript steuert Webseiten – CSS- und DOM_Javascript-Fähigkeiten
Empfohlene Lektüre: JavaScript Controls Web Pages – DOM
DOM ist eine HTML-Manipulationsmethode, die den World Wide Web-Standards entspricht. Sie kann mehr Manipulationsfunktionen als innerHTML-Funktionen erreichen
Hier sind der HTML-Code und der CSS-Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>
Das Knotenattribut „className“ erzielt dramatische Stiländerungen, indem es die gesamte Stilklasse des Knotens ändert
DOM bietet Zugriff auf Elementstilklassen über das className-Attribut der Knotenattribute
alert(document.getElementById(“span1”).className);
Schließen Sie die Transformation des Erscheinungsbilds des Elements ab, indem Sie den Namen der CSS-Stilklasse ändern
document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式
Ähnlich können wir auch die Ereignisse onmouseover() und onmouseout() verwenden, um den Stil von Elementen zu steuern
<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">
Obwohl dieser Effekt im Allgemeinen mit CSS gesteuert wird, konzentrieren wir uns hier nur auf die Anwendung dieser Tools, und Sie können einfach der Analogie folgen
Klassen im CSS-Stil haben absolut nichts mit Javascript-Klassen zu tun – es sind völlig verschiedene Dinge
Durch den Zugriff auf das einzelne Stilattribut des Knotens erreicht das Stilknotenattribut eine kleine Anzahl von Stiländerungen
Das Style-Attribut eines Knotens bietet Zugriff auf ein einzelnes Style-Attribut
<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">
style="visibility:hidden" zeigt an, dass das Element ausgeblendet ist
Webseitenelemente können mithilfe der Sichtbarkeitsstilfunktion des Elementobjekts dynamisch angezeigt oder ausgeblendet werden (display:none/display:block kann auch Elemente ausblenden und anzeigen)
DOM kann jedes HTML-Element nach Belieben erstellen, einschließlich Textabsätzen
document.createElement() wird zum Erstellen eines HTML-Tags verwendet, und der Parameter ist der Tag-Name
document.createElement("p") erstellt ein p-Tag
Anderes: document.createTextNode() wird zum Erstellen von Textabsätzen verwendet, und der Parameter ist der Textinhalt
var pElem=document.createElement(“p”);//Erstellen Sie ein P-Tag
pElem.appendChild(document.createTextNode("Hello WeAreZero!"));//Unterelementtext zum P-Tag hinzufügen
document.getElementById("span1").appendChild(pElem);//Fügen Sie das P-Tag und seine Unterelemente zum span1-Tag hinzu
Anhang:
Mit der Methode createElement() des Dokumentobjekts können Sie jedes HTML-Element erstellen
Wenn Sie einem Element Textinhalt hinzufügen müssen, müssen Sie ein Textinhalts-Unterelement erstellen und es an das Element anhängen
Durch sorgfältiges Hinzufügen und Entfernen von Knoten im DOM-Baum können Webseiten nach Belieben zerlegt und neu organisiert werden
Dies ist die Einführung von JavaScript zur Steuerung von Webseiten – CSS und DOM. Ich hoffe, es wird für alle hilfreich sein!