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>

  Salin selepas log masuk

• JavaScript

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

  Salin selepas log masuk

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'))

  Salin selepas log masuk

• Pintasan untuk Menambah/Mengalih Keluar Kelas

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

  Salin selepas log masuk

• Tetapkan Fungsi untuk Klik Acara

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

  Salin selepas log masuk

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