cari

Rumah >hujung hadapan web >tutorial js >JavaScript DHTML

JavaScript DHTML

PHPz
PHPzke hadapan
2023-09-21 17:09:04653semak imbas

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 cbce1a3cf2f839037583dce8e845670b Selain itu, kami boleh memasukkan JavaScript dalam dokumen HTML dalam elemen 855348821b2e8f2cc4b633bf98f064df

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>

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>

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

JavaScript css html 对象 事件 dom
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Ciri penting JavaScript yang mesti anda ketahuiArtikel seterusnya：Ciri penting JavaScript yang mesti anda ketahui

Artikel berkaitan

Lihat lagi