css untuk menyembunyikan elemen

Dalam reka bentuk dan pembangunan web, kami sering menghadapi situasi di mana elemen perlu disembunyikan. Sebagai contoh, apabila terdapat beberapa maklumat sensitif atau kandungan yang tidak diperlukan pada halaman, kami menyembunyikan elemen ini. CSS menyediakan pelbagai cara untuk menyembunyikan elemen.

1. atribut paparan

Atribut paparan ialah salah satu kaedah yang paling biasa digunakan untuk menyembunyikan elemen. Anda boleh menggunakan display:none atau display:hidden untuk menyembunyikan elemen. Perbezaan antara kedua-dua kaedah ini ialah menggunakan display:none mengalih keluar elemen sepenuhnya daripada aliran dokumen, manakala menggunakan display:hidden hanya menetapkan keterlihatan elemen kepada tersembunyi, tetapi elemen masih mengambil kedudukan. Apabila anda perlu memaparkan semula elemen, gunakan JavaScript atau tetapkan atribut paparan kepada nilai lain dengan mengubah suai gaya CSS.

Kod sampel:

.display-none {
  display: none;
}

.display-hidden {
  display: hidden;
}

2. atribut keterlihatan

Atribut keterlihatan juga boleh digunakan untuk menyembunyikan elemen. visibility:hidden menetapkan keterlihatan elemen kepada tersembunyi, tetapi elemen masih menduduki kedudukan tersebut. Sama seperti display:hidden, elemen boleh dipaparkan semula dengan menetapkan semula atribut keterlihatan kepada kelihatan menggunakan JavaScript atau mengubah suai gaya CSS.

Kod sampel:

.visibility-hidden {
  visibility: hidden;
}

3. atribut kelegapan

Menggunakan atribut kelegapan juga boleh mencapai kesan menyembunyikan elemen. Menetapkan ketelusan elemen kepada 0 menjadikan elemen itu tidak kelihatan sepenuhnya. Perlu diingatkan bahawa elemen tersembunyi menggunakan atribut kelegapan masih menduduki kedudukan tersebut. Begitu juga, apabila anda perlu memaparkan semula elemen, anda boleh menetapkan sifat kelegapan kepada nilai lain melalui JavaScript atau mengubah suai gaya CSS.

Kod sampel:

.opacity-hidden {
  opacity: 0;
}

4. atribut laluan klip

Atribut laluan klip boleh digunakan untuk memotong bahagian tertentu elemen untuk menyembunyikannya Kesan unsur. Anda boleh menggunakan laluan klip untuk memotong elemen pelbagai bentuk, seperti bulatan, segi tiga, dsb. Perlu diingatkan bahawa menggunakan atribut clip-path untuk menyembunyikan elemen masih menduduki kedudukan asal.

Kod contoh:

.clip-path-hidden {
  clip-path: circle(0);
}

5. transformasi atribut

Kesan menyembunyikan elemen juga boleh dicapai dengan menggunakan atribut transformasi. Sebagai contoh, jika anda menggunakan skala(0) untuk mengecilkan elemen kepada 0, elemen tersebut akan menjadi tidak kelihatan sepenuhnya. Perlu diingatkan bahawa menggunakan atribut transform untuk menyembunyikan elemen masih menduduki kedudukan asal. Begitu juga, apabila anda perlu memaparkan semula elemen, anda boleh menggunakan JavaScript atau mengubah suai gaya CSS untuk menetapkan atribut transformasi kepada nilai lain.

Kod sampel:

.transform-hidden {
  transform: scale(0);
}

Ringkasan

Semasa proses pembangunan, terdapat banyak situasi di mana elemen perlu disembunyikan, dan lima kaedah di atas adalah kaedah yang paling biasa. Kaedah yang berbeza perlu dipilih mengikut keperluan sebenar untuk mencapai hasil yang terbaik. Perlu diingatkan bahawa apabila menyembunyikan elemen, anda perlu mempertimbangkan prestasi dan isu kebolehaksesan halaman untuk mengelakkan pengalaman buruk kepada pengguna.

Atas ialah kandungan terperinci css untuk menyembunyikan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!