Bagaimana untuk menukar paparan css dengan js

Dalam proses pembangunan web, kami selalunya perlu menukar gaya melalui JavaScript. Salah satu senario yang biasa digunakan ialah menukar keterlihatan elemen. Dalam CSS, anda boleh menggunakan atribut paparan untuk mengawal keterlihatan sesuatu elemen. Dalam JavaScript, kita boleh menggunakan DOM untuk mengakses dan mengubah suai gaya elemen untuk mengawal keterlihatan elemen.

1. Atribut paparan

Atribut paparan digunakan untuk mengawal cara elemen dipaparkan dalam dokumen. Nilainya boleh seperti berikut:

1. tiada: Unsur tidak diberikan, iaitu, ia tidak dipaparkan dalam dokumen.
2. blok: Elemen dipaparkan sebagai elemen peringkat blok, iaitu elemen akan menduduki seluruh baris.
3. sebaris: Elemen diterangkan sebagai elemen sebaris, iaitu, elemen tidak menduduki keseluruhan baris, tetapi dipaparkan dalam satu baris.
4. blok sebaris: Elemen dipaparkan sebagai elemen peringkat blok sebaris, iaitu elemen akan dipaparkan dalam satu baris dan gaya lebar, tinggi, jidar dan lain-lain boleh ditetapkan.
5. jadual, baris jadual, sel jadual: elemen dipaparkan sebagai elemen berkaitan jadual. jadual menjadikan elemen sebagai jadual, baris jadual menjadikan elemen sebagai baris jadual, dan sel jadual menjadikan elemen sebagai sel jadual.
6. flex, inline-flex: Elemen dipaparkan sebagai bekas fleksibel, yang boleh digunakan untuk melaksanakan reka letak responsif dan senario lain.

2. Atribut paparan operasi JavaScript

Dalam JavaScript, kita boleh mendapatkan dan mengubah suai atribut paparan elemen melalui DOM. Pertama, kita perlu mendapatkan elemen yang perlu dikendalikan melalui kaedah getElementById() objek dokumen. Kaedah ini perlu lulus dalam ID elemen yang perlu diperolehi, contohnya:

var myDiv = document.getElementById('myDiv');

Kod di atas akan memperoleh elemen dengan ID "myDiv" dan menetapkannya kepada pembolehubah myDiv. Seterusnya, kita boleh mengakses atribut gaya elemen melalui atribut gaya. Sebagai contoh, anda boleh menggunakan kod berikut untuk menetapkan atribut paparan elemen kepada tiada, supaya elemen itu tidak dipaparkan pada halaman:

myDiv.style.display = 'none';

Kami juga boleh memaparkan dan menyembunyikan elemen dengan menilai paparan atribut elemen. Sebagai contoh, kod berikut membenarkan elemen dipaparkan dengan menetapkan atribut paparannya untuk menyekat jika ia tersembunyi pada asalnya:

if (myDiv.style.display === 'none') {
  myDiv.style.display = 'block';
}

Jika elemen dipaparkan pada asalnya, anda boleh menetapkan atribut paparannya kepada tiada , dengan itu menyembunyikan elemen:

if (myDiv.style.display !== 'none') {
  myDiv.style.display = 'none';
}

3. Senario aplikasi

1. Sembunyikan dan tunjukkan lapisan pop timbul

Dalam pembangunan web, pop- ups sering digunakan Lapisan untuk memaparkan lebih banyak kandungan atau berinteraksi dengannya. Lapisan pop timbul biasanya perlu dicetuskan apabila pengguna mengklik butang atau pautan dan ditutup apabila pengguna mengklik butang "Tutup". Untuk mencapai fungsi ini, kita boleh menggunakan JavaScript untuk mengubah suai atribut paparan lapisan pop timbul. Dalam keadaan awal lapisan pop timbul, anda boleh menetapkan atribut paparannya kepada tiada, yang bermaksud ia tidak akan dipaparkan pada halaman. Apabila pengguna mengklik butang atau pautan yang mencetuskan lapisan pop timbul, atribut paparan lapisan pop timbul boleh ditetapkan untuk menyekat untuk memaparkan lapisan pop timbul. Apabila pengguna mengklik butang "Tutup" dalam lapisan pop timbul, sifat paparan lapisan pop timbul boleh ditetapkan kepada tiada untuk menutup lapisan pop timbul.

2. Reka letak responsif

Reka letak responsif merujuk kepada saiz skrin paparan peranti berbeza, dengan melaraskan reka letak dan gaya untuk menyesuaikan diri dengan saiz skrin paparan yang berbeza. Apabila melaksanakan reka letak responsif, biasanya kita perlu melaraskan mod paparan dan kedudukan elemen tertentu mengikut saiz skrin. Antaranya, atribut paparan boleh digunakan untuk mengawal mod paparan elemen untuk mencapai susun atur responsif. Contohnya, dalam bar navigasi biasa, kami ingin memaparkan item bar navigasi yang disusun secara mendatar apabila lebar skrin kurang daripada ambang tertentu dan secara menegak apabila lebar skrin lebih besar daripada ambang tersebut. Reka letak responsif ini boleh dicapai dengan menukar atribut paparan setiap item dalam bar navigasi.

3. Kawal keterlihatan elemen berdasarkan gelagat pengguna

Dalam sesetengah senario, kami ingin mengawal keterlihatan elemen berdasarkan gelagat pengguna. Sebagai contoh, apabila pengguna memasukkan kata kunci dalam kotak carian, kami ingin memaparkan lajur hasil carian. Pada masa ini, anda boleh memantau acara input kotak carian dan apabila pengguna memasukkan kata kunci, tetapkan atribut paparan lajur hasil carian untuk disekat untuk memaparkan hasil carian. Jika pengguna mengosongkan kata kunci, hasil carian boleh disembunyikan dengan menetapkan atribut paparan lajur hasil carian kepada tiada.

4. Ringkasan

Dengan mengubah suai atribut paparan elemen, kami boleh mengawal keterlihatan elemen dan melaksanakan pelbagai senario pembangunan web. Apabila melaksanakan senario ini, kita perlu mendapatkan dan mengubah suai atribut gaya elemen melalui JavaScript. Menguasai teknologi ini boleh membantu kami menyelesaikan pelbagai tugas dengan lebih baik dalam pembangunan web.

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