Bagaimana untuk Mengubah Kelegapan Elemen DIV Berbilang dengan querySelectorAll?

Menggunakan querySelectorAll untuk Mengubah Suai Penampilan Berbilang Elemen

Dalam dunia pembangunan web, selalunya perlu untuk memanipulasi gaya berbilang elemen secara serentak. Dalam senario ini, fungsi JavaScript wujud untuk melaraskan kelegapan elemen DIV tertentu. Walau bagaimanapun, cabarannya terletak pada menggunakan fungsi ini pada beberapa DIV sekaligus.

Menggunakan getElementsByClassName pada mulanya kelihatan seperti pendekatan yang berdaya maju, tetapi ia gagal dalam kes kami. Sebaliknya, querySelectorAll muncul sebagai penyelesaian yang lebih sesuai. Begini caranya fungsi boleh dilaksanakan:

<code class="javascript">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>

Dalam kod ini, querySelectorAll mendapatkan semula koleksi semua DIV yang mengandungi nama kelas tertentu. A untuk gelung berulang pada koleksi ini, menggunakan perubahan gaya yang diingini pada setiap elemen.

Sebagai cadangan alternatif, pertimbangkan untuk menggunakan kelas CSS untuk menentukan nilai penggayaan untuk berbilang elemen. Pendekatan ini menjadi berguna apabila nilai penggayaan tidak dinamik. Kod di atas boleh diubah suai kepada:

<code class="javascript">elems[index].classList.add('someclass');</code>

Dengan menambahkan kelas CSS yang mentakrifkan kelegapan dan nilai peralihan yang dikehendaki, fungsi boleh dipermudahkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Kelegapan Elemen DIV Berbilang dengan querySelectorAll?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!