css tunjukkan dan sembunyikan

Css Show and Hide

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk menerangkan gaya dan reka letak halaman web. Dalam pembangunan web, fungsi CSS menunjukkan dan menyembunyikan adalah sangat penting, yang boleh dicapai dengan mengawal keterlihatan elemen HTML. Artikel ini akan memperkenalkan kaedah pelaksanaan dan aplikasi paparan dan penyembunyian CSS.

1. Sintaks asas

Dalam CSS, keterlihatan elemen dikawal dengan menetapkan atribut paparannya. Nilai atribut paparan adalah seperti berikut:

1. tiada: Menyembunyikan elemen dan tidak menyimpan ruang.
2. blok: Elemen dipaparkan sebagai elemen peringkat blok dan menduduki keseluruhan baris ruang.
3. sebaris: Elemen dipaparkan sebagai elemen sebaris dan mengambil ruang sebaris.
4. blok sebaris: Elemen dipaparkan sebagai elemen tahap blok sebaris, menduduki ruang sebaris tetapi lebar dan tinggi boleh ditetapkan.
5. jadual: Elemen dipaparkan sebagai jadual Pada masa ini, atribut paparan elemen akan ditetapkan kepada sel jadual dan sel jadual menduduki ruang jadual.
6. baris jadual: Elemen dipaparkan sebagai baris jadual Pada masa ini, atribut paparan elemen akan ditetapkan kepada sel jadual dan sel jadual menduduki ruang jadual.
7. sel jadual: Elemen dipaparkan sebagai sel jadual dan mengambil ruang jadual.

2. Kaedah pelaksanaan

1. Persembunyian awal

Kaedah pelaksanaan yang paling mudah ialah menetapkan atribut paparan elemen kepada tiada dalam CSS . Contohnya, dalam kod berikut, keadaan awal elemen div disembunyikan:

div{
  display:none;
}

2. Klik untuk memaparkan

Melalui JavaScript, anda boleh memaparkan atau menyembunyikan butang apabila anda mengklik elemen itu. Pertama, tentukan butang dalam HTML:

<button onclick="toggle()">点击显示/隐藏</button>

Acara onclick ditakrifkan di sini Apabila butang diklik, fungsi togol() akan dilaksanakan. Kedua, dalam CSS, tetapkan atribut paparan elemen kepada tiada, seperti yang ditunjukkan di bawah:

#box{
  display:none;
}

Akhir sekali, dalam JavaScript, tentukan fungsi toggle() untuk dipaparkan atau disembunyikan dengan menukar atribut paparan elemen:

function toggle(){
  var box = document.getElementById("box");
  if(box.style.display == "none"){
    box.style.display= "block";
  }
  else{
    box.style.display= "none";
  }
}

3. Paparkan apabila tetikus berguling

Begitu juga, anda boleh menggunakan JavaScript untuk memaparkan atau menyembunyikan elemen apabila tetikus bergolek. Dalam HTML, takrifkan elemen:

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

Acara onmouseover dan onmouseout ditakrifkan di sini, yang mewakili operasi tetikus meluncur ke atas dan keluar masing-masing. Kedua, dalam CSS, tetapkan atribut paparan elemen kepada tiada, seperti yang ditunjukkan di bawah:

#box{
  display:none;
}

Akhir sekali, dalam JavaScript, tentukan fungsi show() dan hide():

function show(){
  var box = document.getElementById("box");
  box.style.display= "block";
}

function hide(){
  var box = document.getElementById("box");
  box.style.display= "none";
}

3 . Contoh aplikasi

1. Kotak timbul

Menggunakan atribut paparan CSS, kotak timbul boleh dipaparkan dan disembunyikan. Dalam HTML, tentukan butang dan tetingkap timbul:

<button onclick="show()">点击弹窗</button>

<div id="dialog">
  <h2>弹窗标题</h2>
  <p>弹窗内容</p>
  <button onclick="hide()">关闭弹窗</button>
</div>

Kemudian, dalam CSS, tetapkan atribut paparan tetingkap timbul kepada tiada, seperti yang ditunjukkan di bawah:

#dialog{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:300px;
  margin-left:-200px;
  margin-top:-150px;
  background:#fff;
  border:1px solid #ccc;
  padding:20px;
}

The tetingkap pop timbul ditetapkan di sini Lebar, ketinggian, kedudukan, warna latar belakang dan gaya lain. Akhir sekali, dalam JavaScript, takrifkan fungsi show() dan hide() untuk mengawal paparan dan menyembunyikan tetingkap timbul masing-masing:

function show(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "block";
}

function hide(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "none";
}

2. Karusel gambar

Melalui CSS Atribut paparan boleh merealisasikan kesan penukaran karusel imej. Dalam HTML, takrifkan bekas imej dan berbilang imej:

<div id="slider">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
</div>

Kemudian, dalam CSS, tetapkan gaya bekas imej, seperti yang ditunjukkan di bawah:

#slider{
  width:500px;
  height:300px;
  overflow:hidden;
  position:relative;
}

#slider img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
}

Di sini lebar bekas imej ialah set , ketinggian, persembunyian limpahan dan kedudukan serta ciri paparan imej. Akhir sekali, dalam JavaScript, kesan karusel imej dicapai:

var imgs = document.querySelectorAll("#slider img");
var index = 0;

setInterval(function(){
  imgs[index].style.display = "none";
  index = (index + 1) % imgs.length;
  imgs[index].style.display = "block";
}, 2000);

Fungsi setInterval digunakan di sini untuk menukar imej setiap 2 saat. Kaedah pelaksanaan khusus adalah untuk menetapkan atribut paparan imej semasa kepada tiada, kemudian mengira nilai indeks imej seterusnya, dan akhirnya menetapkan atribut paparan imej untuk disekat.

4. Ringkasan

Kaedah pelaksanaan fungsi paparan dan sembunyikan CSS adalah sangat mudah, tetapi ia merupakan kemahiran asas dalam pembangunan web. Dalam pembangunan sebenar, pelbagai kesan boleh dicapai melalui atribut paparan CSS, seperti tetingkap timbul, karusel imej, dsb. Pada masa yang sama, melalui kerjasama JavaScript, kesan interaktif yang lebih kaya boleh dicapai.

Atas ialah kandungan terperinci css tunjukkan dan sembunyikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!