Heim > Artikel > Web-Frontend > DHTML-JavaScript

DHTML-JavaScript

PHPznach vorne: 2023-09-21 17:09:04543Durchsuche

DHTML JavaScript

DHTML steht für Dynamic Hypertext Markup Language. DHTML kombiniert HTML, CSS und JavaScript, um interaktive, dynamische Webseiten zu erstellen. Es ermöglicht die Anpassung und Änderung von Inhalten basierend auf Benutzereingaben. Früher wurde HTML zur Erstellung statischer Seiten verwendet, die lediglich die Struktur des Inhalts definierten.

CSS trägt dazu bei, das Erscheinungsbild Ihrer Seite zu verbessern. Allerdings sind diese Technologien nur begrenzt in der Lage, interaktive Erlebnisse zu schaffen. DHTML führt JavaScript und das Document Object Model (DOM) ein, um Webseiten dynamisch zu gestalten. Mithilfe von DHTML können Webseiten basierend auf Benutzeraktionen manipuliert und aktualisiert werden, wodurch die Notwendigkeit entfällt, für jeden Benutzer separate statische Seiten zu erstellen.

Mit dem cbce1a3cf2f839037583dce8e845670b-Tag können wir externe JavaScript-Dokumente in HTML-Dokumente einbinden. Darüber hinaus können wir JavaScript in das HTML-Dokument innerhalb des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Elements einbinden.

Hier sind einige der Aufgaben, die wir mit JavaScript ausführen können: HTML-Aufgaben ausführen, CSS-Aufgaben ausführen, Ereignisse verarbeiten usw.

HTML-Aufgaben ausführen
CSS-Aufgaben ausführen
Umgang mit Ereignissen usw.

Beispiel

Im folgenden Beispiel verwenden wir die HTML-DOM-Methode document.getElementById(), um den Text des id = „demo“-Elements zu ändern -

<!DOCTYPE html>
<html>
<body>
   <h1>Welcome to Tutorialspoint</h1>
   <p id = "demo"> Text will be modified</p>
   <script>
      document.getElementById("demo").innerHTML = "Simply Easy Learning at your fingertips...";
   </script> 
</body>
</html>

Beispiel

Im folgenden Beispiel haben wir eine Funktion erstellt, die aufgerufen wird, wenn auf eine Schaltfläche geklickt wird, die die Hintergrundfarbe des Textes ändert und eine Warnung auf dem Bildschirm anzeigt.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo{
            display: flex;
            margin: auto;
            justify-content: center;
         }
         input{
            display: flex;
            margin: auto;
            justify-content: center;
         }
      </style>
      <h1 id = "demo"> Tutorialspoint </h1>
      <input type = "submit" onclick = "btn()"/>
      <script>
         function btn() {
            document.getElementById("demo").style.backgroundColor = "seagreen";
            window.alert("Background color changed to seagreen");
         }
      </script>
   </head>
</html>

Das obige ist der detaillierte Inhalt vonDHTML-JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 对象事件 dom

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wichtige Funktionen von JavaScript, die Sie kennen müssenNächster Artikel：Wichtige Funktionen von JavaScript, die Sie kennen müssen

In Verbindung stehende Artikel

Mehr sehen