Bagaimanakah Saya Boleh Mengubah Kelas Elemen Dengan Cekap Menggunakan JavaScript?

Cara Menukar Kelas Elemen Menggunakan Acara JavaScript

Teknik HTML5 Moden

Pelayar moden menyokong sifat classList, yang menyediakan kaedah untuk memanipulasi kelas:

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

Pelayar Silang Mudah Penyelesaian

Menukar Semua Kelas:

Gunakan className untuk menetapkan semua kelas:

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

Menambah Kelas Tambahan:

Tambah ruang dan yang baharu kelas:

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

Mengalih keluar Kelas:

Gunakan penggantian regex:

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

Menyemak Kelas:

Gunakan regex yang sama untuk menyemak:

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

Menetapkan Tindakan kepada Acara onClick

Elakkan menggunakan JavaScript sebaris dalam atribut HTML. Sebaliknya, buat fungsi dan panggilnya dalam atribut onClick:

<script>
  function changeClass() {
    // Action code
  }
</script>
<button onClick="changeClass()">My Button</button>

Atau dengan addEventListener:

<script>
  window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
  }
</script>
<button>

Rangka Kerja JavaScript dan Perpustakaan

Contoh jQuery

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

Togol a kelas:

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

Tetapkan acara klik:

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

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