Bagaimana cara menambahkan kelas ke elemen di css?

Question

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

Table of Contents Show

Menggunakan. properti className
Contoh - Menambahkan nama kelas
Bagaimana Anda menambahkan kelas ke elemen?
Bisakah saya menambahkan kelas melalui CSS?
Bisakah Anda menempatkan kelas pada elemen HTML?
Bagaimana cara menambahkan kelas ke elemen klik?

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 SVG

Lebih 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 itu

1


$( "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 ditambahkan

Pada 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

Bagaimana Anda menambahkan kelas ke elemen?

2 cara berbeda untuk menambahkan kelas menggunakan JavaScript .

Menggunakan elemen. Daftar kelas. tambahkan() Metode. elemen var = dokumen. querySelector('. kotak'); . .

Menggunakan elemen. properti className. Catatan. Selalu gunakan operator += dan tambahkan spasi sebelum nama kelas untuk menambahkan kelas dengan metode classList

Bisakah saya menambahkan kelas melalui CSS?

Dengan CSS Hero, Anda dapat dengan mudah menambahkan kelas ke elemen tanpa perlu menyentuh file tema apa pun atau menambahkan kode aneh ke konten Anda . Plus Anda dapat mengontrol semua kelas Anda langsung dari antarmuka CSS Hero.

Bisakah Anda menempatkan kelas pada elemen HTML?

Tip. Atribut kelas dapat digunakan pada elemen HTML apa saja .

Bagaimana cara menambahkan kelas ke elemen klik?

Bagaimana Cara Menambahkan Kelas ke Elemen yang Diklik Menggunakan JavaScript? . Metode addEventListener() mengaitkan suatu peristiwa dengan suatu elemen. The “addEventListener()” method, in combination with the “classList” property and the “add()” method, can be applied to add a class to the clicked element using JavaScript. The addEventListener() method associates an event with an element.

kode css