suchen

Heim >Web-Frontend >js-Tutorial >JavaScript steuert Webseiten – CSS- und DOM_Javascript-Fähigkeiten

JavaScript steuert Webseiten – CSS- und DOM_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:08:231355Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lupen-Plug-in, geschrieben basierend auf jquery_jqueryNächster Artikel：Lupen-Plug-in, geschrieben basierend auf jquery_jquery

In Verbindung stehende Artikel

Mehr sehen