Bagaimana untuk mengawal paparan dan menyembunyikan div dengan css

DIV CSS Show and Hide

DIV ialah teg yang biasa digunakan dalam HTML, digunakan untuk membahagikan halaman dan melaksanakan reka letak. Dalam kesan interaktif halaman, kadangkala kita perlu memaparkan atau menyembunyikan elemen DIV tertentu secara dinamik. Pada masa ini, kita boleh menggunakan sifat paparan CSS untuk mengawal keterlihatan DIV.

1. Atribut paparan

Atribut paparan digunakan untuk mengawal mod paparan elemen HTML. Ia boleh mengambil nilai berikut:

1. tiada

Apabila ditetapkan kepada tiada, elemen akan disembunyikan dan tidak akan meninggalkan sebarang ruang dalam halaman.

2. blok

Apabila ditetapkan untuk menyekat, elemen akan dipaparkan sebagai elemen peringkat blok, iaitu elemen menduduki satu baris dan lebar bekas terisi.

3. sebaris

Apabila ditetapkan kepada sebaris, elemen akan dipaparkan sebagai elemen sebaris, iaitu berbilang elemen boleh dipaparkan pada baris yang sama.

4. blok sebaris

Apabila ditetapkan kepada blok sebaris, elemen akan dipaparkan sebagai elemen tahap blok sebaris, iaitu, berbilang elemen boleh dipaparkan pada baris yang sama, dan Terdapat beberapa jarak antara elemen.

5. jadual

Apabila ditetapkan kepada jadual, elemen akan dipaparkan dalam bentuk jadual dan sifat CSS berkaitan jadual boleh digunakan untuk mengawal reka letak elemen.

Nilai di atas boleh digunakan dalam atribut paparan elemen DIV.

2. Sintaks asas

Dengan menetapkan atribut paparan, kami boleh memaparkan atau menyembunyikan elemen DIV. Berikut ialah sintaks asas:

//显示元素
document.getElementById('example').style.display = 'block';

//隐藏元素
document.getElementById('example').style.display = 'none';

Dalam kod di atas, kami memperoleh elemen DIV dengan id contoh melalui getElementById, dan kemudian mengawal paparan atau penyembunyian elemen dengan menetapkan style.display atribut.

3. Contoh

Di bawah ini kita akan menggunakan contoh untuk menggambarkan cara menggunakan sifat paparan CSS untuk mengawal paparan atau penyembunyian elemen.

1. Sembunyikan elemen DIV

Berikut ialah elemen DIV:

<div id="example">Hi,我是DIV元素！</div>

Kita boleh menggunakan kod berikut untuk menyembunyikan elemen ini:

document.getElementById('example').style.display = 'none';

Dalam contoh ini, kita mendapat elemen DIV dengan contoh id, dan kemudian menetapkan atribut paparannya kepada tiada, dengan itu menyembunyikan elemen tersebut.

2. Paparkan elemen DIV

Jika kita ingin memaparkan elemen DIV yang tersembunyi sebelum ini, kita boleh menggunakan kod berikut:

document.getElementById('example').style.display = 'block';

Dengan cara ini Unsur DIV yang sebelum ini disembunyikan boleh dipaparkan semula.

3. Tukar mod paparan elemen DIV

Apabila menerangkan atribut paparan tadi, kami menyebut bahawa anda boleh menetapkan mod paparan tahap blok, sebaris, blok sebaris -peringkat dan elemen lain. Kita juga boleh menukar paparan elemen DIV dengan cara ini.

Sebagai contoh, kita boleh menggunakan kod berikut untuk mengubah suai elemen DIV menjadi elemen sebaris:

document.getElementById('example').style.display = 'inline';

Dengan cara ini, elemen DIV yang pada asalnya menduduki seluruh baris akan disusun seperti teks.

4. Ringkasan

Dalam kesan interaksi halaman, kita selalunya perlu mengawal paparan atau penyembunyian unsur secara dinamik. Fungsi ini boleh dicapai dengan mudah menggunakan ciri paparan CSS. Melalui sintaks mudah, kita boleh mengawal sama ada elemen DIV sebenarnya wujud atau tidak, dan mengubah suai cara ia dipaparkan. Ambil perhatian bahawa mengubah suai atribut paparan juga akan mempengaruhi cara turunan elemen dipaparkan.

Atas ialah kandungan terperinci Bagaimana untuk mengawal paparan dan menyembunyikan div dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!