Bagaimanakah Saya Menukar Kelas Elemen Menggunakan JavaScript?

Cara Menukar Kelas Elemen Menggunakan JavaScript

Menjawab pelbagai acara seperti onclick, JavaScript menyediakan beberapa teknik untuk mengubah kelas elemen HTML.

HTML5 Moden Teknik

Untuk penyemak imbas moden yang menyokong classList, kaedah berikut menawarkan kaedah mudah pendekatan:

• document.getElementById("MyElement").classList.add('MyClass');
• document.getElementById("MyElement").classList.remove('MyClass ');
• jika (document.getElementById("MyElement").classList.contains('MyClass'))
• document.getElementById("MyElement").classList.toggle('MyClass');

Pelayar silang Penyelesaian

Untuk keserasian penyemak imbas yang lebih luas:

Untuk Menukar Semua Kelas

• document.getElementById("MyElement").className = "MyClass";

Untuk Menambah a Class

• document.getElementById("MyElement").className = " MyClass";

Untuk Mengalih keluar Kelas

• document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|s)MyClass(?!S)/g , '')

Untuk Menyemak sama ada Kelas adalah Digunakan

• jika (document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/))

Menetapkan Tindakan kepada onClick Events

Untuk mengasingkan HTML dan JavaScript, disyorkan untuk digunakan fungsi:

• HTML

  <button onClick="changeClass()">My Button</button>

• JavaScript

  function changeClass() {
    // Code examples from above
  }

Sebagai alternatif, menggunakan addEventListener:

window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
}

Rangka Kerja dan Perpustakaan JavaScript

Perpustakaan seperti jQuery memudahkan tugasan ini:

• Untuk Berubah Kelas

  $('#MyElement').addClass('MyClass');
  $('#MyElement').removeClass('MyClass');
  if ($('#MyElement').hasClass('MyClass'))

• Pintasan untuk Menambah/Mengalih Keluar Kelas

  $('#MyElement').toggleClass('MyClass');

• Tetapkan Fungsi untuk Klik Acara

  $('#MyElement').click(changeClass);

Atas ialah kandungan terperinci Bagaimanakah Saya Menukar Kelas Elemen Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!