Saat bekerja dengan DOM, kami sering merasa perlu memanipulasi kelas elemen. Hari ini kita akan membahas cara menambahkan kelas ke elemen menggunakan JavaScript. Kami akan mengeksplorasi 4 cara tentang cara menambahkan kelas ke elemen apa pun di DOM, termasuk elemen body
dan html
Tambahkan kelas menggunakan className
Cara paling mudah untuk menambahkan kelas adalah menggunakan properti className
. Ini adalah cara "asli" untuk menambahkan kelas ke
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //0 memiliki sintaks sederhana
el.className = "new-class"
_/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //
Terlepas dari apakah kita memilih elemen atau membuat yang baru, kita dapat menggunakan properti className
Catatan. Kita perlu menyadari fakta bahwa jika elemen kita sudah memiliki kelas,
className
_ properti akan menimpanyaproperti classList
Cara kedua untuk menambahkan kelas ke elemen adalah dengan menggunakan properti
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //3. Ini juga merupakan cara "asli" untuk menambahkan kelas baru ke elemen. Apakah kita membuat elemen atau memilih elemen yang sudah ada, kita dapat menggunakan
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //_3 properti
Menurut MDN. Elemen. classList adalah properti hanya-baca yang mengembalikan koleksi DOMTokenList langsung dari atribut kelas elemen. Ini kemudian dapat digunakan untuk memanipulasi daftar kelas
Salah satu metode yang ditawarkan properti
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //_3 adalah metode
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //6. Metode ini digunakan untuk menambahkan kelas ke elemen
Mari kita lihat contohnya
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; el.classList.add["another-class"]; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let aa = document.getElementById["el"]; aa.className = "example-class"; aa.classList.add["another-class"]; console.log[aa]; //Result: //
Kita dapat memanfaatkan metode
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //_6 untuk menambahkan beberapa kelas sekaligus seperti yang ditunjukkan pada contoh di bawah ini
/** * First we select/create an element * */ let el = document.createElement["div"]; el.classList.add["first-class", "second-class", "third-class"]; console.log[el]; //Result: //_
Seperti yang bisa kita lihat, sintaksnya cukup mudah. Untuk setiap kelas baru, kami ingin menambahkan, kami memisahkannya dengan koma
el.classList.add["class1", "class2", ..., "classN"]
Tambahkan kelas menggunakan metode setAttribute
Ini adalah cara ketiga menambahkan kelas ke elemen. Kita dapat mengatur kelas dengan menggunakan metode
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //_8, meskipun ini lebih merupakan peretasan daripada cara asli untuk menambahkan kelas. Tetap saja, kadang-kadang bisa berguna
/** * First we select/create an element * */ let el = document.createElement["div"]; el.setAttribute["class", "example-class"]; console.log[el]; //Result: //
CATATAN. Sama seperti
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //9
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; el.classList.add["another-class"]; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let aa = document.getElementById["el"]; aa.className = "example-class"; aa.classList.add["another-class"]; console.log[aa]; //Result: //0 akan menimpa kelas yang sudah kita miliki
metode beralih
Kami sudah berbicara tentang
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //3. Tapi kami hanya berbicara tentang metode
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //6. Ada metode lain yang dapat menambahkan kelas JIKA kelas belum ada, pada elemen tersebut. Jika tidak, itu akan menghapusnya
/** * First we need to create/select element * */ let el = document.createElement["div"]; el.classList.toggle["example-class"]; console.log[el]; //Result: // //Now we will add another class //using .add[] el.classList.add["another-class"]; console.log[el]; //Result: // /** * Now, if we use .toggle[] with .another-class * .another class will be removed * */ el.classList.toggle["another-class"]; console.log[el]; //Result: //
Seperti yang dapat kita lihat dari contoh di atas, metode
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; el.classList.add["another-class"]; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let aa = document.getElementById["el"]; aa.className = "example-class"; aa.classList.add["another-class"]; console.log[aa]; //Result: //_3 memiliki sintaks yang sederhana, sama seperti metode
/** * We can first create an element * than add class to it * */ let el = document.createElement["div"]; el.className = "example-class"; console.log[el]; //Result: // /** * We can use the same technique * to add a class to existing * element in the DOM * */ let el = document.getElementById["el"]; el.className = "example-class"; console.log[el]; //Result: //6
Jika Anda memiliki pertanyaan atau apa pun, Anda dapat menemukan saya di Twitter saya, atau Anda dapat membaca beberapa artikel saya yang lain seperti Perbarui URL WordPress dengan mudah menggunakan MySQL