Jawaban:
Gunakan element.classList.add untuk menambahkan kelas:
element.classList.add("my-class");Dan element.classList.remove untuk menghapus kelas:
element.classList.remove("my-class");Tambahkan spasi plus nama kelas baru Anda ke classNameproperti elemen. Pertama, letakkan idpada elemen sehingga Anda dapat dengan mudah mendapatkan referensi.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Kemudian
var d = document.getElementById("div1");
d.className += " otherclass";Perhatikan spasi sebelumnya otherclass. Sangat penting untuk memasukkan ruang jika tidak kompromi kelas yang ada yang datang sebelumnya dalam daftar kelas.
Lihat juga element.className di MDN .
Cara termudah untuk melakukan ini tanpa kerangka kerja adalah dengan menggunakan metode element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Sunting: Dan jika Anda ingin menghapus kelas dari suatu elemen -
element.classList.remove("otherclass");Saya lebih suka tidak harus menambahkan ruang kosong dan duplikat entri yang menangani sendiri (yang diperlukan saat menggunakan document.classNamependekatan). Ada beberapa batasan browser , tetapi Anda bisa mengatasinya menggunakan polyfill .
temukan elemen target Anda "d" seperti yang Anda inginkan dan kemudian:
d.className += ' additionalClass'; //note the spaceAnda dapat membungkusnya dengan cara yang lebih cerdas untuk memeriksa pra-keberadaan, dan memeriksa persyaratan ruang dll.
splitclassname di whitespace, hapus yang tidak Anda inginkan dari array yang dihasilkan, kemudian joinarray lagi ... atau gunakan element.classList.remove.
Kompatibel Lintas
Pada contoh berikut kita menambahkan classnameke <body>elemen. Ini kompatibel dengan IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Ini adalah singkatan untuk berikut ini ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Performa
Jika Anda lebih mementingkan kinerja kompatibilitas silang, Anda dapat mempersingkatnya menjadi yang 4% lebih cepat.
var z = document.body;
document.body.classList.add('wait');Kenyamanan
Atau Anda bisa menggunakan jQuery tetapi kinerja yang dihasilkan lebih lambat. 94% lebih lambat menurut jsPerf
$('body').addClass('wait');Performa
Menggunakan jQuery secara selektif adalah metode terbaik untuk menghapus kelas jika Anda khawatir dengan kinerja
var a = document.body, c = ' classname';
$(a).removeClass(c);Tanpa jQuery, 32% lebih lambat
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) memiliki perbedaan kecepatan dibandingkan dengan yang normal ( if (a.classList) { ....)?
classList.remove(). Kenapa kamu tidak menggunakannya? ini jauh lebih cepat daripada jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListuntuk semuanya kecuali untuk menghapus kelas, ini sebabnya saya memintanya.
Pendekatan lain untuk menambahkan kelas ke elemen menggunakan JavaScript murni
Untuk menambahkan kelas:
document.getElementById("div1").classList.add("classToBeAdded");Untuk menghapus kelas:
document.getElementById("div1").classList.remove("classToBeRemoved");Ketika pekerjaan yang saya lakukan tidak menjamin menggunakan perpustakaan, saya menggunakan dua fungsi ini:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}if( cn.indexOf( classname ) != -1 ) { return; } Hati-hati bahwa jika Anda menambahkan kelas "btn" dengan kelas "btn-info" sudah ada di sini, ini gagal.
element.className.split(" ");untuk mencegah masalah @AlexandreDieulot yang dilaporkan di sini.
Dengan asumsi Anda melakukan lebih dari sekedar menambahkan kelas yang satu ini (misalnya, Anda memiliki permintaan asinkron dan seterusnya juga), saya akan merekomendasikan perpustakaan seperti Prototipe atau jQuery .
Ini akan membuat hampir semua yang perlu Anda lakukan (termasuk ini) sangat sederhana.
Jadi misalkan Anda punya jQuery di halaman Anda sekarang, Anda bisa menggunakan kode seperti ini untuk menambahkan nama kelas ke elemen (saat memuat, dalam kasus ini):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Lihat peramban jQuery API untuk hal-hal lain.
Anda bisa menggunakan metode classList.add OR classList.remove untuk menambah / menghapus kelas dari suatu elemen.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Kode di atas akan menambahkan (dan TIDAK mengganti) kelas "anyclass" ke nameElem. Demikian pula Anda dapat menggunakan metode classList.remove () untuk menghapus kelas.
nameElem.classList.remove("anyclss")Untuk menambahkan kelas ke elemen, tanpa menghapus / memengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, seperti:
document.getElementById("MyElement").className += " MyClass";Untuk mengganti semua kelas yang ada dengan satu atau lebih kelas baru, setel atribut className:
document.getElementById("MyElement").className = "MyClass";(Anda dapat menggunakan daftar yang dibatasi ruang untuk menerapkan beberapa kelas.)
Jika Anda tidak ingin menggunakan jQuery dan ingin mendukung browser lama:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Saya tahu IE9 adalah shutdown secara resmi dan kami dapat mencapainya dengan element.classListbanyak yang diceritakan di atas, tetapi saya hanya mencoba mempelajari cara kerjanya tanpaclassList bantuan banyak jawaban di atas. Saya dapat mempelajarinya.
Kode di bawah ini memperluas banyak jawaban di atas dan memperbaikinya dengan menghindari menambahkan kelas duplikat.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');Saya juga berpikir bahwa cara tercepat adalah dengan menggunakan Element.prototype.classList seperti pada es5: document.querySelector(".my.super-class").classList.add('new-class')
tetapi dalam ie8 tidak ada yang namanya Element.prototype.classList, toh Anda dapat melakukan polyfill dengan snippet ini (bebas untuk mengedit dan memperbaikinya) ):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}Hanya untuk menguraikan apa yang dikatakan orang lain, beberapa kelas CSS digabungkan dalam satu string, dibatasi oleh spasi. Jadi, jika Anda ingin kode-keras, itu hanya akan terlihat seperti ini:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Dari sana Anda dapat dengan mudah memperoleh javascript yang diperlukan untuk menambahkan kelas baru ... cukup tambahkan spasi diikuti oleh kelas baru ke properti className elemen. Mengetahui hal ini, Anda juga dapat menulis fungsi untuk menghapus kelas nanti jika perlu.
Untuk menambah, menghapus, atau memeriksa kelas elemen dengan cara sederhana:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');Anda dapat menggunakan pendekatan modern yang mirip dengan jQuery
Jika Anda hanya perlu mengubah satu elemen, elemen pertama yang JS temukan di DOM, Anda dapat menggunakan ini:
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Ingatlah untuk meninggalkan satu spasi sebelum nama kelas.
Jika Anda memiliki beberapa kelas tempat Anda ingin menambahkan kelas baru, Anda dapat menggunakannya seperti ini
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Saya pikir lebih baik menggunakan JavaScript murni, yang bisa kita jalankan di DOM Browser.
Ini adalah cara fungsional untuk menggunakannya. Saya telah menggunakan ES6 tetapi merasa bebas untuk menggunakan ES5 dan ekspresi fungsi atau definisi fungsi, mana saja yang sesuai dengan JavaScript StyleGuide Anda.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}Sampel dengan JS murni. Dalam contoh pertama kita mendapatkan id elemen kita dan menambahkan misalnya 2 kelas.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})Dalam contoh kedua kita mendapatkan nama kelas elemen dan menambahkan 1 lagi.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Bagi mereka yang menggunakan Lodash dan ingin memperbarui classNamestring:
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()pertama, beri id id. Kemudian, panggil fungsi appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>indexOfadalah solusi naif dan memiliki masalah yang sudah ditunjukkan .
Anda bisa menggunakan pemilih API API untuk memilih elemen Anda dan kemudian membuat fungsi dengan elemen dan nama kelas baru sebagai parameter. Menggunakan classlist untuk browser modern, yang lain untuk IE8. Kemudian Anda dapat memanggil fungsi setelah suatu peristiwa.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'ATAU:
document.getElementById('come_id').classList.add('someclassname')Pendekatan pertama membantu dalam menambahkan kelas ketika pendekatan kedua tidak berhasil.
Jangan lupa untuk menyimpan ruang di depan' someclassname' dalam pendekatan pertama.
Untuk penghapusan Anda dapat menggunakan:
document.getElementById('some_id').classList.remove('someclassname')Kode js ini berfungsi untuk saya
menyediakan penggantian nama kelas
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameUntuk menambahkan gunakan saja
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameUntuk menghapus penggunaan
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameSemoga ini bermanfaat untuk sombody
element.classList.add("my-class")sebagai gantinya.