Bagaimana untuk Mengubah Suai Gaya Elemen HTML Dengan Betul Menggunakan JavaScript Apabila Gaya Ditakrifkan Secara Luaran?

Bagaimana untuk Mengubah Suai Gaya untuk Elemen HTML (Digayakan Secara Luaran dengan CSS) Menggunakan JS?

Apabila cuba mengubah gaya elemen HTML menggunakan JavaScript, anda mungkin menghadapi isu. Berikut ialah senario di mana anda menyasarkan untuk menukar warna latar belakang

elemen dengan kelas "rumah" kepada hijau apabila mengklik elemen itu. Walau bagaimanapun, ini tidak berfungsi seperti yang diharapkan. Mari kita periksa kemungkinan sebab untuk isu ini.

Kod Asal:

function selectHome() {
  console.log("test");
  document.getElementsByClassName("home").style += "background-color:green;";
}

Masalah: Menggunakan getElementsByClassName dan Mengubah Gaya Harta

Isu ini berpunca daripada penggunaan getElementsByClassName dan pendekatan yang salah untuk mengubah suai gaya. Berikut ialah pecahan masalah:

1. Menggunakan getElementsByClassName: getElementsByClassName mengembalikan senarai nod langsung, yang bermaksud ia mengemas kini secara dinamik apabila DOM berubah. Walau bagaimanapun, di sini, anda hanya memerlukan rujukan kepada elemen padanan pertama, bukan senarai terkini.
2. Memutasi Sifat gaya: Mengubah suai sifat gaya sebagai rentetan (cth. , style = "background-color:green;") bukan kaedah yang disyorkan. Ia mudah ralat dan boleh membawa kepada kesan sampingan yang tidak diingini.

Penyelesaian: querySelector dan Menetapkan Sifat CSS

Pendekatan yang lebih baik ialah menggunakan querySelector untuk mendapatkan semula merujuk kepada elemen yang diperlukan dan mengubah suai sifat CSSnya secara langsung:

document.querySelector(".home").style.backgroundColor = "green";

Faedah querySelector:

• Bukan Live Nod Return: querySelector mengembalikan satu nod, bukan senarai nod langsung, yang mengelakkan potensi prestasi isu.
• Ketekalan: Ia menyediakan cara yang lebih konsisten dan boleh dipercayai untuk memilih dan mengubah suai elemen.

Ingat, apabila mengubah suai gaya elemen, ia adalah amalan terbaik untuk menetapkan sifat CSS secara langsung dan bukannya menggunakan gabungan rentetan untuk mengubah sifat gaya. Pendekatan ini memastikan kejelasan dan memudahkan penyelenggaraan masa hadapan.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Gaya Elemen HTML Dengan Betul Menggunakan JavaScript Apabila Gaya Ditakrifkan Secara Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!