Atribut kelas dapat digunakan dalam CSS untuk melakukan beberapa tugas untuk elemen dengan nama kelas yang sesuai. Pada artikel ini, kita membahas cara menambahkan kelas ke elemen menggunakan JavaScript. Dalam JavaScript, ada beberapa pendekatan untuk menambahkan kelas ke elemen. Kita dapat menggunakan. properti className atau. add() metode untuk menambahkan nama kelas ke elemen tertentu
Sekarang, mari kita bahas pendekatan untuk menambahkan kelas ke elemen
Menggunakan. properti className
Itu. properti className menetapkan nama kelas dari suatu elemen. Properti ini dapat digunakan untuk mengembalikan nilai atribut kelas dari suatu elemen. Kita dapat menggunakan properti ini untuk menambahkan kelas ke elemen HTML tanpa mengganti kelas yang sudah ada
Untuk menambahkan beberapa kelas, kita harus memisahkan namanya dengan spasi seperti "class1 class2"
Jika suatu kelas sudah dideklarasikan untuk suatu elemen, dan kita perlu menambahkan nama kelas baru ke elemen yang sama maka harus dideklarasikan dengan menyisipkan spasi sebelum menulis nama kelas baru, jika tidak maka akan menimpa nama kelas yang ada. Itu dapat ditulis sebagai berikut
Pada kode di atas, kita telah menyisipkan spasi sebelum newClass
Sintaksis
Sintaks yang umum digunakan dari properti ini untuk menyetel atau mengembalikan nama kelas diberikan di bawah ini
Untuk mengatur nama kelas
Untuk mengembalikan nama kelas
Contoh penggunaan the. properti className diberikan sebagai berikut
Contoh - Menambahkan nama kelas
Dalam contoh ini, kami menggunakan metode add() untuk menambahkan nama kelas ke elemen paragraf yang memiliki id = "p1". Kita harus mengklik tombol HTML yang diberikan "Tambahkan Kelas" untuk melihat efeknya
“. add()” adalah metode bawaan dari properti classList yang dapat digunakan untuk menambahkan nama kelas ke elemen HTML tertentu. Cuplikan di bawah ini akan membuat Anda memahami cara menggunakan ". tambahkan” metode dalam JavaScript
elemen. DaftarKelas . tambahkan("nama_kelas");
Bagaimana ". add()” metode bekerja di JavaScript?
Bagian ini akan menyajikan panduan langkah demi langkah untuk memahami cara menambahkan nama kelas ke elemen HTML menggunakan JavaScript
Dalam program ini kita akan membuat tiga file yaitu file “html”, file “CSS”, dan file “JavaScript”
HTML
< h2 > Bagaimana cara menambahkan nama kelas ke elemen HTML melalui javaScript?
< tombol onClick="classNameFun()" . > Click Me! < /tombol >
< h3 > mengklik "Klik Saya. " tombol akan menambahkan nama kelas ke elemen p berikut < /h3>
< p id="addClass"
Selamat datang di linuxint. com
< /p >
Dalam cuplikan di atas kami melakukan fungsi berikut
- We utilized the
tag to add a heading.
- Next, we utilized tag to create a button and named it as “Click Me!”.
- Memanggil "classNameFun()" setiap kali pengguna mengklik tombol
- Next, we created an
element.
- Finally, we created a paragraph using
element and assigned it an id “addClass”.
CSS
. gaya {
perataan teks. pusat;
gaya font. miring;
warna latar belakang. hitam;
warna. putih;
}
File CSS melayani fungsi-fungsi berikut
- Sejajarkan teks di tengah menggunakan properti "text-align".
- Setel gaya font miring menggunakan properti "font-style".
- Atur warna background hitam menggunakan properti “background-color”.
- Terakhir, atur warna teks putih menggunakan properti “color”.
JavaScript
fungsi classNameFun () {
biarkan para = dokumen. getElementById("addClass");
para. DaftarKelas . tambahkan("gaya");
}
Itu. js atau file JavaScript melayani fungsi yang tercantum di bawah ini
- Membuat fungsi bernama “classNameFun()”
- Memanfaatkan metode getElementByid() untuk membaca/mengedit elemen HTML yang memiliki id "addClass"
- Finally, utilized the add method to add the name to the
element.
Keluaran
Pada eksekusi kode yang berhasil, awalnya, kita akan mendapatkan output berikut
Mengklik “Klik Saya. ” tombol akan menghasilkan output yang diberikan di bawah ini
Ini adalah bagaimana “. add()” metode bekerja dalam JavaScript
Apa ". className” dalam JavaScript?
“. className” adalah properti dalam JavaScript yang menetapkan/mengembalikan atribut kelas dari elemen HTML. Itu dapat digunakan untuk menambah/menentukan nama kelas ke tag HTML apa pun
Cuplikan berikut akan menampilkan sintaks dasar dari “. className”.
elemen. namakelas = nama_kelas ;
Di sini, "class_Name" mewakili nama kelas. Dalam kasus beberapa kelas, kita dapat menentukan nama kelas menggunakan sintaks yang dipisahkan koma
Bagaimana ". className” bekerja di JavaScript?
Mari pertimbangkan contoh yang diberikan di bawah ini untuk mendapatkan pemahaman dasar tentang ". className”.
HTML
< h3 > Bagaimana cara menambahkan nama kelas ke elemen HTML melalui javaScript?
< tombol onClick="classNameFun()" . > Click Me! < /tombol >
< h4 id="addClass"> clicking on the "Click Me!" button will add the class name to this element < /h4 >
Kelas HTML melakukan tugas-tugas berikut
- Utilized the
element to add a heading.
- Utilized tag to create a button and named it as “Click Me!”.
- Memanggil "classNameFun()" setiap kali pengguna mengklik tombol
- finally, created an
and assigned it an id “addClass”.
CSS
File CSS akan tetap sama seperti pada contoh sebelumnya
JavaScript
fungsi classNameFun () {
biarkan dokumen hElement = . getElementById("addClass");
hElement. className = "style";
}
In the JavaScript file, we utilized the getElementById() method to read/edit an HTML element having an id “.addClass”. Afterward, we utilized the add method to add the name to the
element.
Keluaran
Ketika kita menjalankan program yang diberikan di atas, pada awalnya, program ini akan menghasilkan output yang diberikan di bawah ini
Setelah mengklik “Klik Saya. ”, classNameFun() akan dipanggil, akibatnya, kita akan mendapatkan output berikut
The output clarifies that the class name has been added successfully to the
element.Kesimpulan
Dalam JavaScript, “. tambahkan()” metode dan “. className” digunakan untuk menambahkan nama kelas ke elemen HTML apa pun. Tulisan ini menjelaskan semua dasar untuk menambahkan nama kelas ke elemen HTML apa pun. Posting ini menjelaskan cara menggunakan ". tambahkan()” metode dan “. className” dengan bantuan beberapa contoh yang sesuai