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 sudah 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
Fungsi mengembalikan satu atau lebih nama kelas yang dipisahkan spasi untuk ditambahkan ke nama kelas yang ada. Menerima posisi indeks elemen dalam set dan nama kelas yang ada sebagai argumen. Di dalam fungsi, this_ mengacu pada elemen saat ini di set
versi ditambahkan. 3. 3
fungsi
Tipe. ( index, currentClassName ) => .
Fungsi yang mengembalikan satu atau lebih nama kelas yang dipisahkan spasi atau array nama kelas untuk ditambahkan ke nama kelas yang ada. Menerima posisi indeks elemen dalam set dan nama kelas yang ada sebagai argumen. Di dalam fungsi, this_ mengacu pada elemen saat ini di set
Penting untuk dicatat bahwa metode ini tidak menggantikan kelas. Itu hanya menambahkan kelas, menambahkannya ke mana saja yang mungkin sudah ditugaskan ke elemen
Sebelum jQuery versi 1. 12/2. 2, metode .addClass()_ memanipulasi properti
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
0 dari elemen yang dipilih, bukan atribut$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
1. Setelah properti diubah, browserlah yang memperbarui atributnya. Implikasi dari perilaku ini adalah bahwa metode ini hanya berfungsi untuk dokumen dengan semantik HTML DOM (mis. g. , bukan dokumen XML murni)Pada jQuery 1. 12/2. 2, perilaku ini diubah untuk meningkatkan dukungan untuk dokumen XML, termasuk SVG. Mulai dari versi ini, atribut
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
_1 digunakan sebagai gantinya. Jadi, .addClass()_ dapat digunakan pada dokumen XML atau SVGLebih dari satu kelas dapat ditambahkan pada satu waktu, dipisahkan oleh spasi, ke kumpulan elemen yang cocok, seperti itu
1
$( "p" ).addClass( "myClass yourClass" );
Metode ini sering digunakan dengan
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
_4 untuk mengganti kelas elemen dari satu ke yang lain, seperti itu1
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
Di sini, kelas
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
5 dan$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
6 dihapus dari semua paragraf, sementara$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
7 ditambahkanPada jQuery 1. 4, argumen metode .addClass()_ dapat menerima fungsi
1
2
3
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
_Diberikan daftar tidak terurut dengan dua elemen
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
9, contoh ini menambahkan kelas "item-0" ke$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
9 pertama dan "item-1" ke yang kedua