Bagaimanakah saya boleh menggunakan `querySelectorAll` untuk mengubah suai penggayaan berbilang elemen dalam JavaScript?

Mengubah suai Penggayaan Pelbagai Elemen dengan querySelectorAll

Apabila berhadapan dengan keperluan untuk mengubah suai gaya berbilang elemen, satu kaedah yang berdaya maju untuk diterokai ialah menggunakan kaedah querySelectorAll dalam JavaScript. Kaedah ini membenarkan pemilihan berbilang elemen berdasarkan pemilih tertentu, seperti nama kelas.

Untuk menggambarkan penggunaannya, pertimbangkan senario berikut: anda mempunyai fungsi yang dipanggil changeOpacity yang pada masa ini mengubah suai kelegapan sesuatu elemen tunggal apabila dicetuskan. Walau bagaimanapun, anda ingin melanjutkan fungsi ini untuk menggunakan perubahan kelegapan kepada berbilang elemen secara serentak.

Menggunakan querySelectorAll, anda boleh memilih semua elemen yang berkongsi nama kelas biasa. Dengan pemilihan ini diperoleh, anda boleh mengulangi setiap elemen dan menggunakan pengubahsuaian gaya yang diingini—dalam kes ini, melaraskan kelegapan dan peralihan.

Berikut ialah versi terkini fungsi changeOpacity yang menggabungkan querySelectorAll:

<code class="js">function changeOpacity(className) {
    var elems = document.querySelectorAll(className);
    var index = 0, length = elems.length;
    for (; index < length; index++) {
        elems[index].style.transition = "opacity 0.5s linear 0s";
        elems[index].style.opacity = 0.5;
    }
}</code>

Dengan menghantar nama kelas sebagai hujah kepada fungsi changeOpacity, anda kini boleh menggunakan pengubahsuaian kelegapan kepada berbilang elemen dengan nama kelas tersebut.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan `querySelectorAll` untuk mengubah suai penggayaan berbilang elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!