Bagaimanakah Saya Boleh Mengubah Kelas Elemen Dengan Cekap Menggunakan JavaScript?-tutorial js-php.cn

Bagaimanakah Saya Boleh Mengubah Kelas Elemen Dengan Cekap Menggunakan JavaScript?

DDD

Lepaskan： 2024-12-28 08:39:10

asal

650 orang telah melayarinya

How Can I Efficiently Change Element Classes Using 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');

Salin selepas log masuk

Pelayar Silang Mudah Penyelesaian

Menukar Semua Kelas:

Gunakan className untuk menetapkan semua kelas:

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

Salin selepas log masuk

Menambah Kelas Tambahan:

Tambah ruang dan yang baharu kelas:

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

Salin selepas log masuk

Mengalih keluar Kelas:

Gunakan penggantian regex:

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

Salin selepas log masuk

Menyemak Kelas:

Gunakan regex yang sama untuk menyemak:

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

Salin selepas log masuk

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>

Salin selepas log masuk

Atau dengan addEventListener:

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

Salin selepas log masuk

Rangka Kerja JavaScript dan Perpustakaan

Contoh jQuery

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

Salin selepas log masuk

Togol a kelas:

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

Salin selepas log masuk

Tetapkan acara klik:

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

Salin selepas log masuk

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!