Cara Mengubah Kelas Elemen HTML Menggunakan JavaScript

Mia Chevalier

Kamis, 27 Juni 2024 14.21.12

Memperbarui Kelas dengan JavaScript
JavaScript menyediakan alat canggih untuk berinteraksi secara dinamis dan memanipulasi elemen HTML. Salah satu tugas umum adalah mengubah kelas elemen HTML sebagai respons terhadap peristiwa seperti onclick.
Panduan ini akan menunjukkan cara menggunakan JavaScript untuk mengubah kelas elemen, memungkinkan perubahan gaya dan perilaku dinamis pada halaman web Anda. Baik Anda merespons klik tombol atau peristiwa lainnya, teknik ini akan meningkatkan keterampilan pengembangan web Anda.

Memerintah Keterangan

className Menetapkan atau mengembalikan atribut kelas suatu elemen. Digunakan untuk mengubah kelas elemen.

getElementById Mengembalikan elemen yang memiliki atribut ID dengan nilai yang ditentukan. Digunakan untuk memilih elemen tombol.

onclick Menyetel fungsi yang akan dijalankan ketika peristiwa klik terjadi pada elemen.

removeClass Menghapus satu atau lebih nama kelas dari elemen yang dipilih di jQuery.

addClass Menambahkan satu atau lebih nama kelas ke elemen yang dipilih di jQuery.

$ Alias untuk jQuery, digunakan untuk memilih elemen dan melakukan tindakan pada elemen tersebut.

Memerintah	Keterangan
className	Menetapkan atau mengembalikan atribut kelas suatu elemen. Digunakan untuk mengubah kelas elemen.
getElementById	Mengembalikan elemen yang memiliki atribut ID dengan nilai yang ditentukan. Digunakan untuk memilih elemen tombol.
onclick	Menyetel fungsi yang akan dijalankan ketika peristiwa klik terjadi pada elemen.
removeClass	Menghapus satu atau lebih nama kelas dari elemen yang dipilih di jQuery.
addClass	Menambahkan satu atau lebih nama kelas ke elemen yang dipilih di jQuery.
$	Alias untuk jQuery, digunakan untuk memilih elemen dan melakukan tindakan pada elemen tersebut.

Memahami Manipulasi Kelas JavaScript

Skrip yang disediakan menunjukkan cara mengubah kelas elemen HTML menggunakan JavaScript dan jQuery sebagai respons terhadap peristiwa klik. Pada skrip pertama, JavaScript biasa digunakan untuk mencapai fungsi ini. Itu metode digunakan untuk memilih elemen tombol dengan ID 'myButton'. Itu event kemudian ditugaskan ke elemen ini, menentukan fungsi yang akan dieksekusi ketika tombol diklik. Di dalam fungsi ini, ada tombolnya properti diatur ke 'diubah', mengubah kelasnya dan selanjutnya gayanya seperti yang didefinisikan dalam CSS. Skrip ini secara efektif menampilkan kesederhanaan dan keterusterangan penggunaan JavaScript biasa untuk manipulasi DOM.

Skrip kedua mengilustrasikan fungsi yang sama menggunakan jQuery, pustaka JavaScript populer yang menyederhanakan traversal dan manipulasi dokumen HTML. Di sini, alias jQuery digunakan untuk memilih elemen tombol. Itu metode ini kemudian diterapkan untuk menyiapkan pengendali peristiwa untuk peristiwa klik. Dalam handler ini, kelas tombol dimodifikasi menggunakan jQuery Dan addClass metode. Metode ini memberikan cara mudah untuk memanipulasi kelas elemen, menawarkan pendekatan yang lebih mudah dibaca dan ringkas dibandingkan dengan JavaScript biasa. Kedua skrip bertujuan untuk menunjukkan bagaimana alat yang berbeda dapat mencapai tujuan yang sama yaitu mengubah kelas elemen secara dinamis berdasarkan interaksi pengguna.

Mengubah Kelas Elemen saat Klik Menggunakan JavaScript

JavaScript dan HTML

// HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Class Example</title>
<style>
  .original { color: blue; }
  .changed { color: red; }
</style>
</head>
<body>
<button id="myButton" class="original">Click me</button>
<script>
  document.getElementById('myButton').onclick = function() {
    this.className = 'changed';
  };
</script>
</body>
</html>

Memperbarui Kelas Elemen HTML Menggunakan jQuery

JavaScript dengan jQuery

// HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Class with jQuery</title>
<style>
  .original { color: blue; }
  .changed { color: red; }
</style>
</head>
<body>
<button id="myButton" class="original">Click me</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#myButton').click(function() {
    $(this).removeClass('original').addClass('changed');
  });
</script>
</body>
</html>

Teknik Tingkat Lanjut untuk Manipulasi Kelas di JavaScript

Selain perubahan kelas dasar sebagai respons terhadap peristiwa, JavaScript menawarkan teknik yang lebih canggih untuk memanipulasi daftar kelas elemen. Salah satu metode tersebut adalah properti, yang menyediakan cara yang lebih fleksibel dan kuat untuk bekerja dengan kelas. Itu properti mengembalikan koleksi DOMTokenList langsung dari atribut kelas elemen. Menggunakan , Anda dapat menambah, menghapus, mengalihkan, dan memeriksa kelas tanpa memengaruhi kelas lain yang mungkin diterapkan ke elemen tersebut.

Misalnya saja metode dapat digunakan untuk menambahkan satu atau lebih kelas ke suatu elemen, sedangkan metode dapat menghapus satu atau lebih kelas tertentu. Itu Metode ini sangat berguna karena menambahkan kelas jika tidak ada dan menghapusnya jika ada, menjadikannya ideal untuk tugas-tugas seperti menerapkan peralihan mode gelap. Selain itu, contains metode memeriksa apakah elemen berisi kelas tertentu, yang dapat berguna untuk menerapkan gaya atau perilaku secara kondisional berdasarkan status elemen saat ini.

Bagaimana cara menambahkan beberapa kelas ke suatu elemen?
Menggunakan metode dengan banyak argumen: .
Bisakah saya menghapus semua kelas dari suatu elemen?
Ya, Anda dapat menggunakan properti dan atur ke string kosong: .
Apa perbedaan antara Dan ?
menetapkan atau mendapatkan seluruh atribut kelas, sedangkan memungkinkan manipulasi kelas yang lebih terperinci.
Bagaimana cara memeriksa apakah suatu elemen memiliki kelas tertentu?
Menggunakan metode: .
Bagaimana cara mengaktifkan kelas pada suatu elemen?
Menggunakan metode: .
Bisakah saya menggunakan jQuery untuk memanipulasi kelas?
Ya, jQuery menyediakan metode seperti , , Dan .
Apa itu DOMTokenList langsung?
A adalah koleksi langsung yang diperbarui secara otomatis ketika atribut kelas elemen berubah.
Adalah didukung di semua browser?
didukung di semua browser modern, namun versi Internet Explorer yang lebih lama mungkin tidak sepenuhnya mendukungnya.
Bagaimana cara menambahkan kelas secara dinamis berdasarkan kondisi?
Anda dapat gunakan pernyataan dalam kombinasi dengan atau untuk menerapkan kelas secara kondisional.

Teknik Kunci untuk Perubahan Kelas Dinamis

Memanipulasi kelas elemen HTML menggunakan JavaScript atau jQuery memberikan cara mudah untuk memperbarui gaya dan perilaku elemen secara dinamis. Dengan memahami dan memanfaatkan metode seperti , , dan metode manipulasi kelas jQuery, pengembang dapat meningkatkan interaktivitas dan daya tanggap halaman web mereka, menjadikannya lebih menarik bagi pengguna.