1186

Mam element, który ma już klasę:

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

Teraz chcę utworzyć funkcję JavaScript, która doda klasę do div(nie zamienia, ale dodaje).

Jak mogę to zrobić?

javascript css dom-manipulation Blankman
źródło

9

Dla każdego, kto czyta ten wątek w 2020 roku lub później, pomiń starą metodę className i użyj element.classList.add("my-class")zamiast tego.

Pikamander2

1918

Jeśli kierujesz reklamy tylko na nowoczesne przeglądarki:

Użyj element.classList.add, aby dodać klasę:

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

I element.classList.remove, aby usunąć klasę:

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

Jeśli potrzebujesz obsługiwać Internet Explorera 9 lub starszego:

Dodaj spację oraz nazwę nowej klasy do classNamewłaściwości elementu. Najpierw umieść idelement, aby łatwo uzyskać referencję.

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

Następnie

var d = document.getElementById("div1");
d.className += " otherclass";

Zwróć uwagę na miejsce wcześniej otherclass. Ważne jest, aby uwzględnić spację, w przeciwnym razie zagraża to istniejącym klasom, które znajdują się przed nią na liście klas.

Zobacz także element.className w MDN .

Izmael
źródło

26

Jeśli jedyną pracą na całej stronie, którą należy wykonać za pomocą JavaScript, jest dodanie tej nazwy klasy, to tak. Ale nie widzę, aby była to jedyna dynamiczna część strony. Biblioteka pomoże również we wszystkim innym. Przy 30-50 kb jQuery nie jest hitem wartym dyskusji.

rfunduk

167

„Biblioteka pomoże również we wszystkim innym” - oprócz nauki JavaScript

meouw

19

Co dodanie klasy do elementu DOM ma wspólnego z nauką języka? document.getElementById ('div1'). className jest tak samo problemem związanym z biblioteką, jak używanie jQuery do tego samego. Pytanie brzmiało „jak to zrobić”, dokładnie przetestowana biblioteka jest rozsądną odpowiedzią.

rfunduk

6

@thenduks: Jestem pewien, że znasz ten JavaScript! == jQuery. Dobrze, że odpowiedzi na to pytanie obejmują biblioteki i rozwiązania pozabiblioteczne, ponieważ ważne jest, aby wiedzieć, jak działają rzeczy, a nie tylko najprostszy sposób ich osiągnięcia. Zauważysz to pytanie jest znakowany javascript

meouw

2

@meouw: Zgadzam się z tobą. jQuery jest napisane w JavaScript, więc utrzymuję, że wspominanie OP, że biblioteka jest dobrym pomysłem, nie polega na „zrzucaniu frameworka do gardła”. To wszystko.

rfunduk

1350

Najłatwiejszym sposobem na to bez żadnych ram jest użycie metody element.classList.add .

var element = document.getElementById("div1");
element.classList.add("otherclass");

Edycja: A jeśli chcesz usunąć klasę z elementu -

element.classList.remove("otherclass");

Wolę nie dodawać żadnych pustych miejsc i samodzielnie obsługiwać zduplikowanych wpisów (co jest wymagane podczas korzystania z tego document.classNamepodejścia). Istnieją pewne ograniczenia przeglądarki , ale można je obejść za pomocą wielopełniaczy .

Jurij
źródło

67

Szkoda, że nie było to obsługiwane przed IE 10.0, ponieważ jest to doskonała funkcja i najłatwiejsze rozwiązanie problemu, z którym często się spotykam.

mricci

12

Dostępne jest wypełnienie dla classList.

wcandillon

10

element.classList docs w MDN.

willlma

11

Ten wydaje się najlepszy do użycia, ponieważ te z przestrzenią przynajmniej czują się jak hacki - nie

mówiąc

5

@SilverRingvee Kolejnym ryzykiem związanym z podejściem kosmicznym jest to, że niektórzy inni deweloperzy mogą nie wiedzieć, że jest to niezbędne, i usuń go, aby posprzątać.

akauppi,

178

znajdź element docelowy „d”, jak chcesz, a następnie:

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

możesz owinąć to w sprytniejszy sposób, aby sprawdzić wcześniejsze istnienie i sprawdzić wymagania dotyczące miejsca itp.

annakata
źródło

I usunąć za pomocą tej metody?

DeathGrip,

3

@DeathGrip po prostu ustaw klasę z powrotem na jedną zdefiniowaną nazwę d.className = 'originalClass';

TheTechy,

@TheTechy - jeśli masz więcej niż jedną klasę, którą musisz zachować (co zdarza się obecnie bardzo często), to nie zadziała.

Mark Schultheiss,

1

Aby usunąć staromodny sposób, splitnazwę klasy w białych znakach, usuń tę, której nie chcesz z wynikowej tablicy, a następnie jointablicę ponownie ... lub użyj element.classList.remove.

Stijn de Witt

131

Dodaj klasę

Kompatybilność krzyżowa

W poniższym przykładzie dodajemy a classnamedo <body>elementu. Jest to zgodne z IE-8.

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

To jest skrót dla następujących ...

var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

Wydajność

Jeśli bardziej zależy Ci na wydajności niż na kompatybilności krzyżowej, możesz skrócić ją do następujących, czyli o 4% szybciej.
```
var z = document.body;
document.body.classList.add('wait');
```

Wygoda

Alternatywnie możesz użyć jQuery, ale wynikowa wydajność jest znacznie mniejsza. 94% wolniej według jsPerf
```
$('body').addClass('wait');
```

Usuwanie klasy

Wydajność

Selektywne używanie jQuery jest najlepszą metodą usuwania klasy, jeśli zależy Ci na wydajności
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

Bez jQuery jest o 32% wolniejszy

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

Bibliografia

Korzystanie z prototypu

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

Korzystanie z YUI

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

Davidcondrey
źródło

Wow dzięki :) Czy wersja skrócona ( a.classList ? ...) będzie miała jakąkolwiek różnicę prędkości w porównaniu do zwykłej ( if (a.classList) { ....)?

Wilf,

5

Jest olso classList.remove(). Dlaczego tego nie używałeś? jest znacznie szybszy niż jQuery jsperf.com/remove-class-vanilla-vs-jquery

Fez Vrasta

@FezVrasta classList nie jest obsługiwany przed IE 10, który nadal ma przyzwoity udział w rynku (+ 13% na netmarketshare.com).

Adam

6

@Adam używał classListdo wszystkiego oprócz usuwania klas, dlatego o to pytam.

Fez Vrasta 18.03.16

@FezVrasta Pod kompatybilnością krzyżową użyłem .add (), ale dopiero po sprawdzeniu, czy jest dostępna, kompatybilność z hense cross . Aby usunąć, nie zadałem sobie trudu, aby się powtórzyć, więc nie podałem tak wielu opcji.

davidcondrey

33

Inne podejście do dodania klasy do elementu za pomocą czystego JavaScript

Aby dodać klasę:

document.getElementById("div1").classList.add("classToBeAdded");

Aby usunąć klasę:

document.getElementById("div1").classList.remove("classToBeRemoved");

Shoaib Chikate
źródło

4

Na to już inni użytkownicy odpowiedzieli już kilka razy, w tym dyskusje na temat obsługi przeglądarki i podkładek.

bafromca

@bafromca Nie widziałem, że poprzednia odpowiedź została podana i to mój błąd. Możesz oflagować tę odpowiedź

Shoaib Chikate

3

@ShoaibChikate: możesz również usunąć odpowiedź, jeśli chcesz (zachowasz punkty). Próbuję tylko ograniczyć bałagan w tym pytaniu; całkowicie do ciebie.

Dan Dascalescu

22

Kiedy praca, którą wykonuję, nie wymaga użycia biblioteki, korzystam z tych dwóch funkcji:

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

miau
źródło

15

if( cn.indexOf( classname ) != -1 ) { return; } Uwaga: jeśli dodasz klasę „btn”, a klasa „btn-info” już tu jest, to się nie powiedzie.

Alexandre Dieulot,

1

powinieneś użyć, element.className.split(" ");aby zapobiec zgłoszonemu tutaj problemowi @AlexandreDieulot.

Amir Fo

20

Zakładając, że robisz coś więcej niż tylko dodawanie tej jednej klasy (np. Masz żądania asynchroniczne itd.), Zaleciłbym bibliotekę taką jak Prototype lub jQuery .

Dzięki temu prawie wszystko, co musisz zrobić (w tym to), stanie się bardzo proste.

Powiedzmy, że masz już jQuery na swojej stronie, możesz użyć takiego kodu, aby dodać nazwę klasy do elementu (w tym przypadku podczas ładowania):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Sprawdź przeglądarkę API jQuery, aby zobaczyć inne rzeczy.

rfunduk
źródło

15

Możesz użyć metody classList.add LUB classList.remove, aby dodać / usunąć klasę z elementu.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

Powyższy kod doda (i NIE zastąpi) klasę „anyclass” do nameElem. Podobnie możesz użyć metody classList.remove (), aby usunąć klasę.

nameElem.classList.remove("anyclss")

s JV
źródło

bardzo ładne, ale nie obsługiwane w IE <= 9 lub Safari <= 5.0 ... :( ( caniuse.com/classlist )

simon

1

Zostało to już omówione , w tym obsługa przeglądarki.

Dan Dascalescu,

10

Aby dodać dodatkową klasę do elementu:

Aby dodać klasę do elementu, nie usuwając / nie wpływając na istniejące wartości, dodaj spację i nową nazwę klasy, tak jak poniżej:

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

Aby zmienić wszystkie klasy dla elementu:

Aby zastąpić wszystkie istniejące klasy jedną lub większą liczbą nowych klas, ustaw atrybut className:

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

(Możesz użyć listy rozdzielanej spacjami, aby zastosować wiele klas.)

Mo.
źródło

6

Jeśli nie chcesz używać jQuery i chcesz obsługiwać starsze przeglądarki:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

Ferran Maylinch
źródło

5

Wiem, że IE9 jest oficjalnie wyłączony i możemy to osiągnąć, element.classListjak wiele powiedziano powyżej, ale po prostu próbowałem dowiedzieć się, jak to działa bez classListpomocy wielu odpowiedzi powyżej, mogłem się tego nauczyć.

Poniższy kod rozszerza wiele powyższych odpowiedzi i poprawia je, unikając dodawania zduplikowanych klas.

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
źródło

5

Ja również uważam, że najszybszym sposobem jest użycie Element.prototype.classList jak w es5: document.querySelector(".my.super-class").classList.add('new-class') ale w ie8 nie ma czegoś takiego jak Element.prototype.classList, w każdym razie można go wypełnić za pomocą tego fragmentu (można go swobodnie edytować i ulepszać ):

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

Rozwiń fragment kodu

asdru
źródło

4

Aby rozwinąć to, co powiedzieli inni, wiele klas CSS jest połączonych w jednym ciągu, oddzielonych spacjami. Tak więc, jeśli chcesz go na stałe zakodować, wyglądałoby to tak:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

Stamtąd możesz łatwo uzyskać javascript niezbędny do dodania nowej klasy ... po prostu dodaj spację, a następnie nową klasę do właściwości className elementu. Wiedząc o tym, możesz również napisać funkcję, aby usunąć klasę później, jeśli zajdzie taka potrzeba.

Misko
źródło

4

Aby w prosty sposób dodawać, usuwać lub sprawdzać klasy elementów:

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
źródło

4

Możesz zastosować nowoczesne podejście podobne do jQuery

Jeśli chcesz zmienić tylko jeden element, pierwszy, który JS znajdzie w DOM, możesz użyć tego:

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>

Rozwiń fragment kodu

Pamiętaj, aby zostawić jedno miejsce przed nazwą klasy.

Jeśli masz wiele klas, w których chcesz dodać nową klasę, możesz jej użyć w ten sposób

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>

Rozwiń fragment kodu

Vladimir Jovanović
źródło

3

Myślę, że lepiej jest używać czystego JavaScript, który możemy uruchomić na DOM przeglądarki.

Oto funkcjonalny sposób jego użycia. Użyłem ES6, ale możesz swobodnie korzystać z ES5 i wyrażenia funkcji lub definicji funkcji, w zależności od tego, który kod JavaScript jest odpowiedni.

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

Rozwiń fragment kodu

bvmCoder
źródło

2

Próbka z czystym JS. W pierwszym przykładzie otrzymujemy identyfikator naszego elementu i dodajemy np. 2 klasy.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

W drugim przykładzie otrzymujemy nazwę klasy elementu i dodajemy jeszcze 1.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

Wasyl Gutnyk
źródło

1

Dla tych, którzy używają Lodash i chcą zaktualizować classNameciąg:

// 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
źródło

0

po pierwsze, daj div identyfikator. Następnie wywołaj funkcję 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
źródło

1

zastąpi klasę, nie dołączając! Być może brakuje linii lub oldClass + "" + classToAppend zamiast ostatniej classToAppend

Vinze

indexOfjest naiwnym rozwiązaniem i ma już wskazany problem .

Dan Dascalescu,

0

Za pomocą interfejsu API querySelector można wybrać element, a następnie utworzyć funkcję z elementem i nową nazwą klasy jako parametrami. Korzystanie z listy klas w nowoczesnych przeglądarkach, w innym przypadku w IE8. Następnie możesz wywołać funkcję po zdarzeniu.

 //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
źródło

Zostało to już omówione , wraz z obsługą przeglądarki.

Dan Dascalescu,

0

Najkrótszy

image1.parentNode.className+=' box';

Pokaż fragment kodu

image1.parentNode.className+=' box';

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

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

Rozwiń fragment kodu

Kamil Kiełczewski
źródło

0

document.getElementById('some_id').className+='  someclassname'

LUB:

document.getElementById('come_id').classList.add('someclassname')

Pierwsze podejście pomogło w dodaniu klasy, gdy drugie podejście nie zadziałało.
Nie zapomnij zachować miejsca przed' someclassname' pierwszym podejściem.

Do usunięcia możesz użyć:

document.getElementById('some_id').classList.remove('someclassname')

Athira V Ajit
źródło

-4

Ten kod js działa dla mnie

zapewnia zastąpienie nazwy klasy

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

Aby dodać wystarczy użyć

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

Aby usunąć użycie

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

Mam nadzieję, że to jest pomocne do sombody

Zaraz
źródło

-9

W YUI, jeśli dodasz yuidom , możesz użyć

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

HTH

Alagu
źródło

12

Napisał JavaScript, a nie jQuery lub YUI.

Radek

Jak dodać klasę do danego elementu?

Odpowiedzi:

Jeśli kierujesz reklamy tylko na nowoczesne przeglądarki:

Jeśli potrzebujesz obsługiwać Internet Explorera 9 lub starszego:

Dodaj klasę

Usuwanie klasy

Bibliografia

Korzystanie z prototypu

Korzystanie z YUI

Aby dodać dodatkową klasę do elementu:

Aby zmienić wszystkie klasy dla elementu:

Najkrótszy