whycomputer.com >> Rangkaian komputer >  >> Internet

Cara Memperluas &Meruntuhkan DIV dalam JavaScript

Div membolehkan anda mengumpulkan elemen di halaman Web. Ada dua cara untuk menyebabkan div pada halaman Web hilang. Pertama, anda kod membuat div menjadi elemen yang tidak kelihatan, atau anda boleh menggunakan runtuh. Sekiranya anda membuat div tidak kelihatan, ruang kosong kekal di mana div wujud. Meruntuhkan div menghilangkan ruang kosong itu tanpa meninggalkan "lubang" di laman Web anda. Menggunakan JavaScript yang dipautkan ke butang, anda membuat div anda sendiri yang runtuh dan berkembang apabila pengguna mengklik butang.

Tambah Div ke Halaman Web

Langkah 1

Lancarkan Notepad dan buka mana-mana dokumen HTML anda.

Langkah 2

Tambahkan sekatan kod HTML ini ke bahagian "badan" dokumen:

Teks Div

Kod ini menghasilkan div dan butang. Div mengandungi perenggan dengan teks yang berbunyi:"Teks div." Gantikan teks itu dengan apa sahaja yang anda suka. "Butang" memanggil fungsi JavaScript ketika diklik. Fungsi itu menyebabkan div beralih antara keadaan runtuh dan keadaan yang diperluas.

Cari sifat "id" dan "class" di tag div. Untuk membuat div yang berkembang dan runtuh, anda mesti memberikan div id nilai id. Dalam contoh ini, nilai itu adalah "MyDiv." Div juga mempunyai harta kelas. Dalam contoh ini, nilai harta itu "divVisible." Itulah nama kelas CSS yang ditentukan di bahagian seterusnya.

Tambahkan Kelas CSS dan JavaScript

Langkah 1

Tambahkan kod CSS berikut ke bahagian "kepala" dokumen: Ini mewujudkan kelas "divVisible" dan kelas lain bernama "divHidden." Kelas "divVisible" menetapkan nilai paparannya ke "blok". Nilai "blok" menjadikan elemen HTML yang merujuk kelas kelihatan dan mengembangkannya untuk memenuhi ruang di laman Web. Kelas "divHidden" menetapkan nilai paparannya menjadi "tidak ada." Mana-mana elemen HTML yang merujuk bahawa kelas runtuh dan tidak meninggalkan ruang di belakang.

Langkah 2

Tambahkan kod JavaScript ini di bawah kod CSS:Pemboleh ubah divID menyimpan nilai id div yang anda ingin runtuh dan kembangkan. Nilai itu adalah "MyDiv." Selebihnya kod memperoleh nama kelas CSS div sekarang dan menukarnya setiap kali kod dijalankan. Kali pertama kod ini dilaksanakan, ia menukar nama kelas div menjadi "divHidden." Kali kedua berjalan, ia menukar nama kelas kembali ke "divVisible."

Langkah 3

Simpan dokumen HTML, dan buka di penyemak imbas anda. Ayat yang mengandungi perenggan anda muncul.

Klik butang "Runtuhkan / Kembangkan". Teks runtuh. Klik butang sekali lagi untuk mengembangkan teks. Perhatikan bagaimana butang dan elemen lain di bawah teks bergerak ke atas ketika teks runtuh dan bergerak ke bawah ketika teks mengembang.


URL:https://ms.whycomputer.com/internet/1015006624.html

Internet
  • Cara Menghantar Iklan di Craigslist

    Craigslist adalah raja iklan baris dalam talian di mana anda boleh menyiarkan iklan anda secara percuma (kecuali untuk peluang pekerjaan). Sekiranya anda baru menggunakan Craigslist, berikut adalah lapan langkah mudah mengenai cara menghantar apa sahaja yang anda mahukan. Langkah 1 Pergi ke c

  • Cara Memadamkan Fail Javascript

    JavaScript adalah bahasa pengaturcaraan skrip yang popular. Ia digunakan secara meluas untuk membuat laman web dinamik di Internet dan juga dalam banyak aplikasi komputer. Walaupun terdapat persamaan nama, JavaScript tidak berkaitan dengan bahasa pengaturcaraan Java. Menghapus fail JavaScript biasan

  • Cara Menukar Tarikh UTC Javascript ke Waktu Timur

    Orang sering menyatakan zon waktu dari seluruh dunia sebagai penggantian positif atau negatif dari Waktu Sejagat yang Diselaraskan, atau UTC. UTC adalah standard waktu berdasarkan Waktu Atom Antarabangsa dan dalam penggunaan santai dianggap setara dengan Waktu Minimum Greenwich (GMT). Menggunakan ba

Rangkaian komputer © https://ms.whycomputer.com