Cara Memperluas & Perkecil DIV di JavaScript

Divs memungkinkan Anda untuk mengelompokkan elemen pada halaman Web. Ada dua cara untuk menyebabkan div pada halaman Web menghilang. Pertama, Anda kode membuat div menjadi elemen yang tidak terlihat, atau Anda bisa menggunakan runtuh. Jika Anda hanya membuat div tidak terlihat, ruang kosong tetap ada di mana div ada. Runtuh div menghapus ruang kosong itu tanpa meninggalkan "lubang" di halaman Web Anda. Menggunakan JavaScript yang ditautkan dengan tombol, Anda membuat div Anda sendiri yang runtuh dan meluas ketika pengguna mengklik tombol.

Tambahkan Div ke Halaman Web

Langkah 1
Luncurkan Notepad dan buka salah satu dokumen HTML Anda.

Langkah 2
Tambahkan blok kode HTML ini ke bagian "badan" dokumen:

Teks Div
Kode ini membuat div dan tombol. Div berisi paragraf dengan teks yang berbunyi: "Teks Div." Ganti teks itu dengan apa pun yang Anda suka. "Tombol" memanggil fungsi JavaScript saat diklik. Fungsi itu menyebabkan div untuk beralih antara keadaan diciutkan dan status diperluas.
Temukan properti "id" dan "class" di tag div. Untuk membuat div yang meluas dan menyusut, Anda harus memberikan nilai id pada div. Dalam contoh ini, nilai itu adalah "MyDiv." Div juga memiliki properti kelas. Dalam contoh ini, nilai properti itu "divVisible." Itu adalah nama kelas CSS yang didefinisikan di bagian berikutnya.

Tambahkan Kelas CSS dan JavaScript

Langkah 1
Tambahkan kode CSS berikut ke bagian "kepala" dokumen: Ini menciptakan kelas "divVisible" dan kelas lain bernama "divHidden." Kelas "divVisible" menetapkan nilai tampilan ke "blokir." Nilai "blok" membuat elemen HTML apa pun yang mereferensikan kelas terlihat dan memperluasnya untuk menempati ruang di halaman Web. Kelas "divHidden" menetapkan nilai tampilan ke "tidak ada." Setiap elemen HTML yang mereferensikan kelas itu runtuh dan tidak meninggalkan ruang di belakang.

Langkah 2
Tambahkan kode JavaScript ini di bawah kode CSS: Variabel divID menyimpan nilai id dari div yang ingin Anda hapus dan perluas. Nilai itu adalah "MyDiv." Sisa kode mendapatkan nama kelas CSS saat ini dari div dan mengubahnya setiap kali kode berjalan. Pertama kali kode dieksekusi, itu mengubah nama kelas div menjadi "divHidden." Saat kedua dijalankan, ini mengubah nama kelas kembali menjadi "divVisible."

Langkah 3
Simpan dokumen HTML, dan buka di browser Anda. Paragraf yang berisi paragraf Anda muncul.
Klik tombol "Tutup /Bentangkan". Teks runtuh. Klik tombol lagi untuk membuka teks. Perhatikan bagaimana tombol dan elemen lainnya di bawah teks bergerak ke atas ketika teks runtuh dan bergerak ke bawah saat teks membesar.

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