Cara Menambahkan Nama Class DOM Javascript

Kita lanjutkan lagi belajarnya tentang cara mengubah Attribute HTML pastinya masih melalui DOM javascript. Sebelumnya kita sudah belajar sekilas tentang setAttribute yaitu kasusnya menambahkan attribute class pada HTML-nya tapi ternyata ada metode yang lebih mudah. Pada javacript kita bisa menggunakan metode className dengan menuliskan

dengan className ini kita bisa menambahkan nama class class yang belum ada pada HTMLnya. dan jika kasusnya teman teman sudah punya nama class di HTMLnya tentu caranya pun akan berbeda. Misalnya saya akan buat contoh sederhananya dan masih menggunakan struktur yang sebelumnya ada tiga tag <div>

tapi tag div tersebut punya sebuah class dengan nama box dan saya berikan sedikit CSS seperti ini

yang akan mengatur lebar dan tinggi pada boxnya Lalu kita akan pilih berdasarkan byClassname sebagai berikut

Pada contoh ini kita akan menambahkan class baru yaitu class primary yang saya berikan background.

dimana kita tidak mau nilai class box tersebut hilang maka dari kita tambahkan += untuk penulisanya

jadi dengan tambahkan += ini berarti kita ambil class sebelumnya yaitu box lalu kita tambahkan dengan class yang baru yaitu primary yang saya pisahkan dengan spasi. Lakukan hal sama untuk kedua box tersebut. Hasilnya akan seperti berikut

dan jika teman teman lihat pada browser dan inspect elemennya maka tag <div> punya dua class yang dimana punya nilai yang berbeda beda.

Itu dia cara menambahkan nama class dengan DOM javascript. Terima kasih dan semoga bermanfaat.

26 Juli 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat