Bagaimana untuk Mengubah Suai Gaya Kelas CSS secara Dinamik dalam JavaScript tanpa getElementById?

Mengubah suai Gaya Kelas CSS dalam JavaScript tanpa getElementById

Masalah:

Cara mengubah suai secara dinamik gaya CSS elemen dengan menyasarkan kelas dalam JavaScript tanpa menggunakan getElementById?

Jawapan:

Walaupun mungkin untuk mengubah suai gaya CSS menggunakan tatasusunan styleSheets dalam JavaScript , alternatif yang lebih cekap ialah mencipta gaya berasingan dengan tetapan paparan yang diingini.

Sebagai contoh, buat helaian gaya dengan peraturan berikut:

.hidden {
  display: none;
}

Untuk menggunakan gaya ini pada elemen , gunakan kaedah remove():

const element = document.querySelector(".hidden");
element.classList.remove("hidden");

Ini mengalih keluar kelas tersembunyi dan peraturan gayanya, menjadikan elemen kelihatan.

Nota Tambahan:

Adalah penting untuk ambil perhatian bahawa pendekatan ini mencipta peraturan gaya baharu dalam DOM. Walaupun ia memberikan lebih fleksibiliti dan kawalan ke atas penggayaan, penggunaan kaedah ini secara berlebihan boleh meningkatkan penggunaan memori dokumen.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Gaya Kelas CSS secara Dinamik dalam JavaScript tanpa getElementById?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!