Bagaimana untuk Togol Kelas Elemen dengan JavaScript Tulen?

Menogol Kelas Elemen dengan JavaScript Tulen: Panduan Komprehensif

Pengenalan

Dalam JavaScript, mengawal kelas elemen adalah penting untuk pembangunan web dinamik. Satu tugas biasa ialah menogol kelas untuk menukar rupa atau fungsi elemen. Walaupun jQuery telah membuat tugas ini mudah, adalah penting untuk memahami cara untuk menyelesaikannya menggunakan JavaScript tulen.

Penyelesaian jQuery dan Setara JavaScript

Kod jQuery yang disediakan menggunakan kaedah toggleClass() untuk menogol kelas menu-hidden dan hidden-phone pada elemen tertentu.

JavaScript Equivalen:

• Pilihan 1 (classList.toggle):

Pelayar moden menyokong kaedah classList.toggle(). Contohnya:

<code class="javascript">var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');</code>

• Pilihan 2 (classList.js untuk Penyemak Imbas Lama):

Pelayar lama boleh menggunakan perpustakaan classlist.js untuk melaksanakan classList.toggle(). Contoh:

<code class="javascript">var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');</code>

Penjelasan tentang Penggunaan ID

Sebagai nota sampingan, adalah disyorkan untuk mengelak daripada menggunakan ID dalam kod JavaScript anda. ID ialah global yang bocor ke dalam objek tetingkap JavaScript, yang boleh membawa kepada tingkah laku yang tidak dijangka dan potensi kebocoran memori. Sebaliknya, gunakan kelas untuk kod yang lebih modular dan terkapsul.

Atas ialah kandungan terperinci Bagaimana untuk Togol Kelas Elemen dengan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!