Tambahkan kelas ke tag html

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

Show

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? </h2>
< 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 tombolNext, 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 berikutSejajarkan 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”.JavaScriptfungsi classNameFun () {  biarkan para = dokumen. getElementById("addClass");  para. DaftarKelas . tambahkan("gaya");}Itu. js atau file JavaScript melayani fungsi yang tercantum di bawah iniMembuat 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.KeluaranPada eksekusi kode yang berhasil, awalnya, kita akan mendapatkan output berikutMengklik “Klik Saya. ” tombol akan menghasilkan output yang diberikan di bawah iniIni adalah bagaimana “. add()” metode bekerja dalam JavaScript (adsbygoogle = window.adsbygoogle || []).push({}); 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? </h3>
    < 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 tombolfinally, created an and assigned it an id “addClass”.CSS (adsbygoogle = window.adsbygoogle || []).push({}); File CSS akan tetap sama seperti pada contoh sebelumnyaJavaScriptfungsi 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.KeluaranKetika kita menjalankan program yang diberikan di atas, pada awalnya, program ini akan menghasilkan output yang diberikan di bawah iniSetelah mengklik “Klik Saya. ”, classNameFun() akan dipanggil, akibatnya, kita akan mendapatkan output berikutThe 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

      Bagaimana cara menambahkan kelas ke elemen dalam HTML?

      JavaScript menyediakan 2 cara berbeda untuk menambahkan kelas ke elemen HTML. .
      Menggunakan elemen. Daftar kelas. tambahkan() Metode
      Menggunakan properti className

      Bisakah saya menambahkan kelas ke tag formulir?

      Ya. Anda dapat menambahkan id dan kelas apa pun ke formulir dengan menambahkan atribut html_id dan html_class ke dalam shortcode [contact-form-7] .

      Bagaimana Anda menambahkan kelas dalam HTML dan CSS?

      Jika Anda ingin menggunakan kelas, gunakan tanda titik (. ) diikuti dengan nama kelas dalam blok gaya . Selanjutnya, gunakan braket yang disebut blok deklarasi yang berisi properti untuk mengatur gaya elemen, seperti warna teks atau ukuran teks. Kelas CSS akan membantu Anda menyesuaikan gaya elemen HTML dengan cepat.