Tambahkan nama kelas dalam javascript
|
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 Show
Tambahkan kelas menggunakan classNameCara paling mudah untuk menambahkan kelas adalah 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:
//0 memiliki sintaks sederhana/**
* 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 Catatan. Kita perlu menyadari fakta bahwa jika elemen kita sudah memiliki kelas, className_ properti akan menimpanyaproperti classListCara 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 propertiMenurut 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 elemenMari 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 Tambahkan kelas menggunakan metode setAttributeIni 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 milikimetode beralihKami 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:
//6Jika 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 Bagaimana cara menambahkan kelas dalam JavaScript?Menggunakan. properti className . Properti ini digunakan untuk menambahkan nama kelas ke elemen yang dipilih. Sintaksis. Ini digunakan untuk mengatur properti className.
Bagaimana cara menambahkan nama kelas saat klik di JavaScript?Metode “addEventListener()”, dikombinasikan dengan properti “classList” dan metode “add()” , dapat diterapkan untuk menambahkan kelas ke elemen yang diklik . Metode addEventListener() mengaitkan suatu peristiwa dengan suatu elemen. Properti classList memberikan nama kelas CSS dari suatu elemen.
Bagaimana cara menambahkan nama kelas di getElementById?getElementById("Elemen Saya"). className = "MyClass"; (Anda harus menggunakan daftar yang dipisahkan spasi untuk menerapkan beberapa kelas. ) Di sini, flag g akan memberi tahu penggantian untuk mengulang sesuai kebutuhan, jika nama kelas telah ditambahkan beberapa kali.
Bagaimana Anda memberi nama kelas dalam JavaScript?Kelas . Nama peka huruf besar kecil, huruf kecil dan huruf besar berbeda Mulai nama kelas dengan huruf kapital, gunakan PascalCase untuk nama Gunakan nama deskriptif, yang menjelaskan fungsionalitas kelas Komponen yang digunakan dalam kerangka frontend mengikuti aturan yang sama |
