recherche

Maison >interface Web >js tutoriel >DHTML-JavaScript

DHTML-JavaScript

PHPz
PHPzavant
2023-09-21 17:09:04606parcourir

DHTML JavaScript

DHTML signifie Dynamic Hypertext Markup Language. DHTML combine HTML, CSS et JavaScript pour créer des pages Web interactives et dynamiques. Il permet de personnaliser et de modifier le contenu en fonction des entrées de l'utilisateur. Auparavant, HTML était utilisé pour créer des pages statiques qui définissaient uniquement la structure du contenu.

CSS contribue à améliorer l'apparence de votre page. Cependant, ces technologies sont limitées dans leur capacité à créer des expériences interactives. DHTML introduit JavaScript et le modèle objet de document (DOM) pour rendre les pages Web dynamiques. Grâce au DHTML, les pages Web peuvent être manipulées et mises à jour en fonction des actions de l'utilisateur, éliminant ainsi le besoin de créer des pages statiques distinctes pour chaque utilisateur.

Nous pouvons inclure des documents JavaScript externes dans des documents HTML en utilisant la balise cbce1a3cf2f839037583dce8e845670b De plus, nous pouvons inclure JavaScript dans le document HTML dans l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a

Voici quelques-unes des tâches que nous pouvons effectuer en utilisant JavaScript : effectuer des tâches HTML, effectuer des tâches CSS, gérer des événements, etc.

  • Effectuer des tâches HTML

  • Effectuer des tâches CSS

  • Gestion des événements, etc.

Exemple

Dans l'exemple ci-dessous, nous utilisons la méthode HTML DOM document.getElementById() pour modifier le texte de l'élément id = "demo" -

<!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>

Exemple

Dans l'exemple ci-dessous, nous avons créé une fonction appelée si un bouton est cliqué, qui change la couleur de fond du texte et affiche une alerte à l'écran. 

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html 对象 事件 dom
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Fonctionnalités importantes de JavaScript que vous devez connaîtreArticle suivant：Fonctionnalités importantes de JavaScript que vous devez connaître

Articles Liés

Voir plus