1189

Saya memiliki elemen yang sudah memiliki kelas:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Sekarang saya ingin membuat fungsi JavaScript yang akan menambah kelas ke div(bukan menggantikan, tetapi menambahkan).

Bagaimana saya bisa melakukan itu?

javascript css dom-manipulation Blankman
sumber

9

Untuk siapa pun yang membaca utas ini pada tahun 2020 atau lebih baru, lewati metode className yang lama dan gunakan element.classList.add("my-class")sebagai gantinya.

Pikamander2

1921

Jika Anda hanya menargetkan browser modern:

Gunakan element.classList.add untuk menambahkan kelas:

element.classList.add("my-class");

Dan element.classList.remove untuk menghapus kelas:

element.classList.remove("my-class");

Jika Anda perlu mendukung Internet Explorer 9 atau lebih rendah:

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 .

Ismail
sumber

26

Jika satu-satunya pekerjaan pada seluruh halaman yang perlu dilakukan dengan JavaScript adalah penambahan nama kelas ini, maka ya. Tapi saya tidak bisa melihat ini menjadi satu-satunya bagian dinamis dari halaman. Perpustakaan juga akan membantu segala hal lainnya. Pada 30-50kb jQuery hampir tidak layak dibahas.

rfunduk

167

"Perpustakaan akan membantu semua hal lain juga" - selain belajar JavaScript

meouw

19

Apa yang harus dilakukan dengan menambahkan kelas ke elemen DOM dengan mempelajari bahasa? document.getElementById ('div1'). className adalah sebanyak masalah terkait perpustakaan seperti menggunakan jQuery untuk melakukan hal yang sama. Pertanyaannya adalah "bagaimana saya bisa melakukan itu", sebuah perpustakaan yang diuji secara menyeluruh adalah jawaban yang masuk akal.

rfunduk

6

@ thenduks: Saya yakin Anda tahu itu JavaScript! == jQuery. Ini adalah hal yang baik bahwa jawaban untuk pertanyaan ini termasuk solusi perpustakaan dan non perpustakaan karena penting untuk mengetahui bagaimana segala sesuatunya bekerja bukan hanya cara paling sederhana untuk mencapainya. Anda akan melihat pertanyaan ini ditandai dengan javascript

meouw

2

@meouw: Saya setuju dengan Anda. Namun, jQuery ditulis dalam JavaScript, jadi saya berpendapat bahwa menyebutkan ke OP bahwa perpustakaan adalah ide yang bagus bukanlah 'mendorong kerangka kerja ke tenggorokannya'. Itu saja.

rfunduk

1351

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 .

Yuri
sumber

67

Sayang sekali ini tidak didukung sebelum IE 10.0 karena ini fitur yang sangat baik dan solusi termudah untuk masalah yang sering saya temui.

mricci

12

Polyfill untuk classList tersedia.

wcandillon

10

element.classList docs di MDN.

willlma

11

Yang ini tampaknya menjadi yang terbaik untuk digunakan, karena yang memiliki ruang setidaknya terasa seperti retasan - bukan untuk menambah kelas ...

Silver Ringvee

5

@ SilverRingvee Risiko lebih lanjut dari pendekatan ruang adalah bahwa beberapa pengembang lain mungkin tidak tahu itu penting, dan menghapusnya untuk membersihkan semuanya.

akauppi

178

temukan elemen target Anda "d" seperti yang Anda inginkan dan kemudian:

d.className += ' additionalClass'; //note the space

Anda dapat membungkusnya dengan cara yang lebih cerdas untuk memeriksa pra-keberadaan, dan memeriksa persyaratan ruang dll.

annakata
sumber

Dan untuk menghapus menggunakan metode ini?

DeathGrip

3

@DeathGrip cukup mengatur kelas kembali ke nama tunggal yang ditentukan d.className = 'originalClass';

TheTechy

@ TheTechy - jika Anda memiliki lebih dari satu kelas yang perlu Anda pertahankan (yang banyak terjadi hari ini), itu tidak akan berhasil.

Mark Schultheiss

1

Untuk menghapus cara lama, splitclassname di whitespace, hapus yang tidak Anda inginkan dari array yang dihasilkan, kemudian joinarray lagi ... atau gunakan element.classList.remove.

Stijn de Witt

131

Tambahkan Kelas

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');
```

Menghapus kelas

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;

Referensi

Menggunakan Prototipe

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Menggunakan YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

davidcondrey
sumber

Wow terima kasih :) Akankah versi steno ( a.classList ? ...) memiliki perbedaan kecepatan dibandingkan dengan yang normal ( if (a.classList) { ....)?

Wilf

5

Ada olso classList.remove(). Kenapa kamu tidak menggunakannya? ini jauh lebih cepat daripada jQuery jsperf.com/remove-class-vanilla-vs-jquery

Fez Vrasta

@FezVrasta classList tidak didukung sebelum IE 10, yang masih memiliki pangsa pasar yang layak (+ 13% di netmarketshare.com).

Adam

6

@ Adam dia digunakan classListuntuk semuanya kecuali untuk menghapus kelas, ini sebabnya saya memintanya.

Fez Vrasta

@FezVrasta Under cross kompatibel saya memang menggunakan .add () tetapi hanya setelah memeriksa untuk melihat apakah tersedia, hense cross kompatibel . Untuk menghapus saya tidak repot-repot mengulang jadi saya tidak memasukkan banyak pilihan.

davidcondrey

33

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");

Shoaib Chikate
sumber

4

Itu sudah dijawab beberapa kali oleh pengguna lain, termasuk diskusi tentang dukungan browser dan shims.

bafromca

@ bafromca Saya tidak melihat bahwa jawaban sebelumnya diberikan dan ini adalah kesalahan saya. Anda dapat menandai jawaban ini

Shoaib Chikate

3

@ShoaibChikate: Anda juga dapat menghapus jawabannya jika mau (Anda akan menyimpan poinnya) Hanya berusaha mengurangi kekacauan pada pertanyaan ini; sepenuhnya terserah kamu.

Dan Dascalescu

22

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;
}

meouw
sumber

15

if( cn.indexOf( classname ) != -1 ) { return; } Hati-hati bahwa jika Anda menambahkan kelas "btn" dengan kelas "btn-info" sudah ada di sini, ini gagal.

Alexandre Dieulot

1

Anda harus menggunakan element.className.split(" ");untuk mencegah masalah @AlexandreDieulot yang dilaporkan di sini.

Amir Fo

20

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.

rfunduk
sumber

15

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")

sjv
sumber

sangat bagus, tetapi tidak didukung di IE <= 9 atau Safari <= 5.0 ... :( ( caniuse.com/classlist )

simon

1

Ini sudah dibahas , termasuk dukungan browser.

Dan Dascalescu

10

Untuk menambahkan kelas tambahan ke elemen:

Untuk menambahkan kelas ke elemen, tanpa menghapus / memengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, seperti:

document.getElementById("MyElement").className += " MyClass";

Untuk mengubah semua kelas untuk suatu elemen:

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.)

Mo.
sumber

6

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);
}

Ferran Maylinch
sumber

5

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');

Yuvaraj
sumber

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
	})
}

Luaskan cuplikan

Asdru
sumber

4

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.

Misko
sumber

4

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');

Marcos Fernandez Ramos
sumber

4

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>

Luaskan cuplikan

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>

Luaskan cuplikan

Vladimir Jovanović
sumber

3

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)
  }
}

Luaskan cuplikan

bvmCoder
sumber

2

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";
})

Vasyl Gutnyk
sumber

1

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()

SD
sumber

0

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>

tehvan
sumber

1

itu akan menggantikan kelas yang tidak ditambahkan! Mungkin ada baris yang hilang atau oldClass + "" + classToAppend bukan classToAppend terakhir

Vinze

indexOfadalah solusi naif dan memiliki masalah yang sudah ditunjukkan .

Dan Dascalescu

0

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');

KevinOrfas
sumber

Ini sudah dibahas , bersama dengan dukungan browser.

Dan Dascalescu

0

Terpendek

image1.parentNode.className+=' box';

Tampilkan cuplikan kode

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Luaskan cuplikan

Kamil Kiełczewski
sumber

0

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')

Athira V Ajit
sumber

-4

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 name

Untuk 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 name

Untuk 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 name

Semoga ini bermanfaat untuk sombody

Segera
sumber

-9

Di YUI, jika Anda memasukkan yuidom , Anda dapat menggunakannya

YAHOO.util.Dom.addClass('div1','className');

HTH

Alagu
sumber

12

Dikatakan JavaScript, bukan jQuery atau YUI.

Radek

Bagaimana cara menambahkan kelas ke elemen yang diberikan?

Jawaban:

Jika Anda hanya menargetkan browser modern:

Jika Anda perlu mendukung Internet Explorer 9 atau lebih rendah:

Tambahkan Kelas

Menghapus kelas

Referensi

Menggunakan Prototipe

Menggunakan YUI

Untuk menambahkan kelas tambahan ke elemen:

Untuk mengubah semua kelas untuk suatu elemen:

Terpendek