whycomputer.com >> Jaringan komputer >  >> Internet

Cara Memperluas dan Memperkecil DIV dengan JavaScript

Memperluas dan Memperkecil DIV dengan JavaScript

Menambahkan DIV ke Halaman Web

Langkah 1

Jalankan Notepad dan buka salah satu dokumen HTML Anda.

Langkah 2

Tambahkan blok kode HTML berikut ke bagian body:

<div id="MyDiv" class="divVisible">
    <p>Teks DIV</p>
</div>
<input id="Button1" type="button" value="Collapse/Expand" onclick="CollapseExpand()">

Di sini, div berisi paragraf dengan teks “Teks DIV”. Ganti teks sesuai kebutuhan. Tombol memanggil fungsi JavaScript CollapseExpand() yang mengubah status div antara tersembunyi dan terlihat.

Pastikan div memiliki atribut id (misalnya MyDiv) dan class (misalnya divVisible) yang akan dipakai dalam CSS dan JavaScript.

Menambahkan CSS dan JavaScript

Langkah 1

Masukkan kode CSS berikut di dalam tag <head>:

<style type="text/css">
.divVisible { display: block; }
.divHidden  { display: none;  }
</style>

Class divVisible membuat elemen terlihat dan mengisi ruang di halaman. Class divHidden menyembunyikan elemen sehingga tidak meninggalkan ruang kosong.

Langkah 2

Tambahkan kode JavaScript berikut tepat setelah CSS:

<script type="text/javascript">
function CollapseExpand() {
    var divID = "MyDiv";
    var divElement = document.getElementById(divID);
    if (divElement.className === "divVisible") {
        divElement.className = "divHidden";
    } else {
        divElement.className = "divVisible";
    }
}
</script>

Fungsi ini memeriksa class saat ini dan menukarnya antara divVisible dan divHidden setiap kali tombol diklik.

Langkah 3

Simpan dokumen HTML dan buka di browser. Paragraf yang ada di dalam DIV akan terlihat.

Klik tombol “Collapse/Expand”. Teks akan tersembunyi. Klik lagi untuk menampilkan kembali. Perhatikan bagaimana elemen di bawahnya bergerak ke atas saat DIV tersembunyi dan kembali ke bawah ketika ditampilkan.

Dengan pendekatan ini, Anda dapat membuat konten interaktif yang dapat diubah ukurannya tanpa meninggalkan ruang kosong di halaman web.


URL:https://komputer.whycomputer.com/Internet/101306624.html

Internet
  • Cara Memposting Iklan di Craigslist

    Craigslist adalah raja iklan online gratis (kecuali lowongan kerja). Jika Anda baru di Craigslist, ikuti delapan langkah mudah berikut untuk memposting apa saja. Langkah 1 Kunjungi craigslist.org/about/sites dan pilih daerah target tempat Anda ingin memposting. Langkah 2 Klik post to classifieds di

  • Cara Menghapus File JavaScript di Windows Vista dan XP

    Pengantar JavaScript adalah bahasa skrip yang populer digunakan untuk membuat halaman web dinamis dan banyak aplikasi komputer. Meskipun namanya mirip, JavaScript tidak terkait dengan bahasa pemrograman Java. Menghapus file JavaScript sering diperlukan untuk menghilangkan skrip yang tidak diinginkan

  • Cara Mengonversi Waktu UTC JavaScript ke Waktu Timur

    Cara Mengonversi Waktu UTC JavaScript ke Waktu Timur Zona waktu di seluruh dunia biasanya dinyatakan sebagai offset positif atau negatif terhadap Coordinated Universal Time (UTC). UTC, yang berdasarkan International Atomic Time, secara umum dianggap setara dengan Greenwich Mean Time (GMT). Dengan me

Jaringan komputer © https://komputer.whycomputer.com