JavaScript DHTML

PHPz
Lepaskan: 2023-09-21 17:09:04
ke hadapan
593 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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan