JavaScript DHTML-tutorial js-php.cn

JavaScript DHTML

PHPz

Lepaskan： 2023-09-21 17:09:04

ke hadapan

614 orang telah melayarinya

DHTML JavaScript

DHTML ialah singkatan kepada Dynamic Hypertext Markup Language. DHTML menggabungkan HTML, CSS dan JavaScript untuk mencipta halaman web yang interaktif dan dinamik. Ia membolehkan kandungan disesuaikan dan diubah berdasarkan input pengguna. Terdahulu, HTML digunakan untuk mencipta halaman statik yang hanya menentukan struktur kandungan.

CSS membantu meningkatkan rupa halaman anda. Walau bagaimanapun, teknologi ini terhad dalam keupayaan mereka untuk mencipta pengalaman interaktif. DHTML memperkenalkan JavaScript dan Model Objek Dokumen (DOM) untuk menjadikan halaman web dinamik. Menggunakan DHTML, halaman web boleh dimanipulasi dan dikemas kini berdasarkan tindakan pengguna, menghapuskan keperluan untuk membuat halaman statik yang berasingan untuk setiap pengguna.

Kami boleh memasukkan dokumen JavaScript luaran dalam dokumen HTML menggunakan teg Selain itu, kami boleh memasukkan JavaScript dalam dokumen HTML dalam elemen

Berikut ialah beberapa tugas yang boleh kami lakukan menggunakan JavaScript, melaksanakan tugasan CSS, mengendalikan acara, dsb.

Lakukan tugas HTML
Lakukan tugas CSS
Mengendalikan acara, dsb.

Contoh

Dalam contoh di bawah, kami menggunakan kaedah HTML DOM document.getElementById() untuk menukar teks elemen 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>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah mencipta fungsi yang dipanggil jika butang diklik, yang menukar warna latar belakang teks dan memaparkan amaran pada skrin.

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

Salin selepas log masuk

Atas ialah kandungan terperinci JavaScript DHTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!