1188

Ich habe ein Element, das bereits eine Klasse hat:

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

Jetzt möchte ich eine JavaScript-Funktion erstellen, die der Klasse eine hinzufügt div(nicht ersetzen, sondern hinzufügen).

Wie kann ich das machen?

javascript css dom-manipulation Blankman
quelle

9

Wenn Sie diesen Thread im Jahr 2020 oder später lesen möchten, überspringen Sie die alte className-Methode und verwenden Sie sie element.classList.add("my-class")stattdessen.

Pikamander2

1920

Wenn Sie nur auf moderne Browser abzielen:

Verwenden Sie element.classList.add , um eine Klasse hinzuzufügen:

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

Und element.classList.remove , um eine Klasse zu entfernen:

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

Wenn Sie Internet Explorer 9 oder niedriger unterstützen müssen:

Fügen Sie dem Leerzeichen ein Leerzeichen und den Namen Ihrer neuen Klasse hinzu className Eigenschaft des Elements . Setzen Sie zuerst ein idauf das Element, damit Sie leicht eine Referenz erhalten können.

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

Dann

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

Beachten Sie das Leerzeichen vor otherclass. Es ist wichtig, den Speicherplatz einzuschließen, da sonst vorhandene Klassen, die davor stehen, in die Klassenliste aufgenommen werden.

Siehe auch element.className auf MDN .

Ishmael
quelle

26

Wenn die einzige Arbeit auf der gesamten Seite, die mit JavaScript ausgeführt werden muss, das Hinzufügen dieses Klassennamens ist, dann ja. Aber ich kann nicht sehen, dass dies der einzige dynamische Teil der Seite ist. Eine Bibliothek hilft auch bei allem anderen. Bei 30-50kb ist jQuery kaum ein Hit, über den es sich zu diskutieren lohnt.

Rfunduk

167

"Eine Bibliothek hilft auch bei allem anderen" - abgesehen vom Erlernen von JavaScript

meouw

19

Was hat das Hinzufügen einer Klasse zu einem DOM-Element mit dem Erlernen der Sprache zu tun? document.getElementById ('div1'). className ist ebenso ein bibliotheksbezogenes Problem wie die Verwendung von jQuery, um dasselbe zu tun. Die Frage war "Wie kann ich das machen?", Eine gründlich getestete Bibliothek ist die vernünftige Antwort.

Rfunduk

6

@thenduks: Ich bin sicher, dass Sie JavaScript kennen! == jQuery. Es ist gut, dass die Antworten auf diese Frage Bibliotheks- und Nichtbibliothekslösungen enthalten, da es wichtig ist zu wissen, wie Dinge funktionieren, und nicht nur auf einfachste Weise, um sie zu erreichen. Sie werden feststellen, dass diese Frage mit Javascript markiert ist

meouw

2

@meouw: Ich stimme dir zu. jQuery ist jedoch in JavaScript geschrieben , daher behaupte ich, dass die Erwähnung gegenüber dem OP, dass eine Bibliothek eine gute Idee ist, nicht „ein Framework in den Rachen drückt“. Das ist alles.

Rfunduk

1351

Der einfachste Weg, dies ohne Framework zu tun, ist die Verwendung der Methode element.classList.add .

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

Bearbeiten: Und wenn Sie Klasse aus einem Element entfernen möchten -

element.classList.remove("otherclass");

Ich bevorzuge es, keinen leeren Raum hinzuzufügen und die Eingabe selbst zu duplizieren (was bei Verwendung des document.classNameAnsatzes erforderlich ist ). Es gibt einige Browser-Einschränkungen , die Sie jedoch mithilfe von Polyfills umgehen können .

Yuri
quelle

67

Es ist eine Schande, dass dies vor IE 10.0 nicht unterstützt wird, da es eine hervorragende Funktion und die einfachste Lösung für ein Problem ist, auf das ich häufig stoße.

mricci

12

Eine Polyfüllung für classList ist verfügbar.

Wcandillon

10

element.classList-Dokumente auf MDN.

Willlma

11

Dieser scheint der beste zu sein, da sich diejenigen mit Platz zumindest wie Hacks anfühlen - nicht zum Hinzufügen von Klassen ...

Silver Ringvee

5

@SilverRingvee Ein weiteres Risiko des Space-Ansatzes besteht darin, dass einige andere Entwickler möglicherweise nicht wissen, dass er wichtig ist, und ihn entfernen, um die Dinge zu bereinigen.

Akauppi

178

Finden Sie Ihr Zielelement "d", wie Sie möchten, und dann:

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

Sie können dies auf cleverere Weise einwickeln, um das Vorhandensein zu überprüfen und den Platzbedarf zu überprüfen.

Annakata
quelle

Und mit dieser Methode zu entfernen?

DeathGrip

3

@DeathGrip setzt die Klasse einfach auf einen einzelnen definierten Namen zurück. D.className = 'originalClass';

TheTechy

@TheTechy - Wenn Sie mehr als eine Klasse haben, die Sie behalten müssen (was heutzutage häufig vorkommt), funktioniert das nicht.

Mark Schultheiss

1

Um den altmodischen Weg, splitden Klassennamen auf Leerzeichen, zu entfernen, entfernen Sie den gewünschten Namen aus dem resultierenden Array und dann joindas Array erneut ... oder verwenden Sie element.classList.remove.

Stijn de Witt

131

Klasse hinzufügen

Kreuzkompatibel

Im folgenden Beispiel fügen wir classnamedem <body>Element ein hinzu. Dies ist IE-8-kompatibel.

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

Dies ist eine Abkürzung für Folgendes.

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

Performance

Wenn Sie sich mehr um die Leistung als um die Kompatibilität kümmern, können Sie diese auf 4% schneller verkürzen.
```
var z = document.body;
document.body.classList.add('wait');
```

Bequemlichkeit

Alternativ können Sie jQuery verwenden, die resultierende Leistung ist jedoch erheblich langsamer. 94% langsamer laut jsPerf
```
$('body').addClass('wait');
```

Klasse entfernen

Performance

Die selektive Verwendung von jQuery ist die beste Methode zum Entfernen einer Klasse, wenn Sie sich mit der Leistung befassen
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

Ohne jQuery ist es 32% langsamer

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

Verweise

Prototyp verwenden

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

Verwenden von YUI

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

Davidcondrey
quelle

Wow danke :) Wird die Kurzversion ( a.classList ? ...) einen Geschwindigkeitsunterschied zur normalen Version ( ) haben if (a.classList) { ....?

Wilf

5

Da ist auch classList.remove(). Warum hast du es nicht benutzt? Es ist viel schneller als jQuery jsperf.com/remove-class-vanilla-vs-jquery

Fez Vrasta

@FezVrasta classList wird vor IE 10 nicht unterstützt, der immer noch einen anständigen Marktanteil hat (+ 13% auf netmarketshare.com).

Adam

6

@Adam er hat classListfür alles verwendet, außer um Klassen zu entfernen, deshalb frage ich es.

Fez Vrasta

@FezVrasta Unter cross kompatibel habe ich .add () verwendet, aber erst nachdem ich überprüft habe, ob es verfügbar ist, hense cross kompatibel . Zum Entfernen habe ich mich nicht wiederholt, daher habe ich nicht so viele Optionen hinzugefügt.

Davidcondrey

33

Ein weiterer Ansatz zum Hinzufügen der Klasse zum Element mithilfe von reinem JavaScript

Zum Hinzufügen einer Klasse:

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

Zum Entfernen der Klasse:

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

Shoaib Chikate
quelle

4

Dies wurde bereits mehrmals von anderen Benutzern beantwortet, einschließlich Diskussionen über Browserunterstützung und Shims.

bafromca

@bafromca Ich habe nicht gesehen, dass die vorherige Antwort gegeben wurde und es ist mein Fehler. Sie können diese Antwort

markieren

3

@ShoaibChikate: Sie können die Antwort auch löschen, wenn Sie möchten (Sie behalten die Punkte). Ich versuche nur, die Unordnung in dieser Frage zu reduzieren. ganz bei dir.

Dan Dascalescu

22

Wenn die Arbeit, die ich mache, die Verwendung einer Bibliothek nicht rechtfertigt, verwende ich diese beiden Funktionen:

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
quelle

15

if( cn.indexOf( classname ) != -1 ) { return; } Beachten Sie, dass dies fehlschlägt, wenn Sie die Klasse "btn" hinzufügen, wobei die Klasse "btn-info" bereits vorhanden ist.

Alexandre Dieulot

1

Sie sollten verwenden element.className.split(" ");, um das hier gemeldete Problem @AlexandreDieulot zu verhindern.

Amir Fo

20

Angenommen, Sie tun mehr als nur das Hinzufügen dieser einen Klasse (z. B. haben Sie asynchrone Anforderungen usw.), würde ich eine Bibliothek wie Prototype oder jQuery empfehlen .

Dies macht fast alles, was Sie tun müssen (einschließlich dieser), sehr einfach.

Nehmen wir also an, Sie haben jetzt jQuery auf Ihrer Seite. Sie können Code wie diesen verwenden, um einem Element einen Klassennamen hinzuzufügen (in diesem Fall beim Laden):

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

Überprüfen Sie den jQuery API-Browser auf andere Dinge.

rfunduk
quelle

15

Mit der Methode classList.add OR classList.remove können Sie eine Klasse zu einem Element hinzufügen oder daraus entfernen.

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

Der obige Code fügt nameElem eine Klasse "anyclass" hinzu (und ersetzt sie NICHT). Ebenso können Sie die classList.remove () -Methode verwenden, um eine Klasse zu entfernen.

nameElem.classList.remove("anyclss")

sjv
quelle

sehr schön, aber nicht unterstützt in IE <= 9 oder Safari <= 5.0 ... :( ( caniuse.com/classlist )

Simon

1

Dies wurde bereits besprochen , einschließlich der Browserunterstützung.

Dan Dascalescu

10

So fügen Sie einem Element eine zusätzliche Klasse hinzu:

Um einem Element eine Klasse hinzuzufügen, ohne vorhandene Werte zu entfernen / zu beeinflussen, fügen Sie ein Leerzeichen und den neuen Klassennamen wie folgt hinzu:

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

So ändern Sie alle Klassen für ein Element:

Um alle vorhandenen Klassen durch eine oder mehrere neue Klassen zu ersetzen, legen Sie das Attribut className fest:

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

(Sie können eine durch Leerzeichen getrennte Liste verwenden, um mehrere Klassen anzuwenden.)

Mo.
quelle

6

Wenn Sie jQuery nicht verwenden und ältere Browser unterstützen möchten:

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

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

Ferran Maylinch
quelle

5

Ich weiß, dass IE9 offiziell heruntergefahren wird und wir es mit element.classListden oben genannten erreichen können, aber ich habe nur versucht zu lernen, wie es ohne funktioniertclassList dass ich es mithilfe vieler Antworten oben lernen könnte.

Der folgende Code erweitert viele der obigen Antworten und verbessert sie, indem das Hinzufügen doppelter Klassen vermieden wird.

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
quelle

5

Ich denke auch, dass der schnellste Weg darin besteht, Element.prototype.classList wie in es5 zu verwenden: document.querySelector(".my.super-class").classList.add('new-class') aber in ie8 gibt es kein Element.prototype.classList, trotzdem können Sie es mit diesem Snippet polyfillieren (es kann frei bearbeitet und verbessert werden ):

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

Erweitern Sie das Snippet

asdru
quelle

4

Um näher darauf einzugehen, was andere gesagt haben, werden mehrere CSS-Klassen in einer einzigen Zeichenfolge kombiniert, die durch Leerzeichen begrenzt ist. Wenn Sie es also fest codieren möchten, sieht es einfach so aus:

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

Von dort aus können Sie leicht das zum Hinzufügen einer neuen Klasse erforderliche Javascript ableiten. Fügen Sie einfach ein Leerzeichen gefolgt von der neuen Klasse an die className-Eigenschaft des Elements an. Wenn Sie dies wissen, können Sie auch eine Funktion schreiben, um eine Klasse später zu entfernen, falls dies erforderlich sein sollte.

Misko
quelle

4

So fügen Sie Elementklassen auf einfache Weise hinzu, entfernen oder überprüfen sie:

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
quelle

4

Sie können einen modernen Ansatz verwenden, der jQuery ähnelt

Wenn Sie nur ein Element ändern müssen, das erste, das JS in DOM findet, können Sie Folgendes verwenden:

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>

Erweitern Sie das Snippet

Denken Sie daran, vorher ein Leerzeichen zu lassen Klassennamen .

Wenn Sie mehrere Klassen haben, in denen Sie eine neue Klasse hinzufügen möchten, können Sie diese folgendermaßen verwenden

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>

Erweitern Sie das Snippet

Vladimir Jovanović
quelle

3

Ich denke, es ist besser, reines JavaScript zu verwenden, das wir im DOM des Browsers ausführen können.

Hier ist die funktionale Art, es zu verwenden. Ich habe ES6 verwendet, kann aber auch ES5 und Funktionsausdruck oder Funktionsdefinition verwenden, je nachdem, was für Ihren JavaScript StyleGuide geeignet ist.

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

Erweitern Sie das Snippet

bvmCoder
quelle

2

Probe mit reinem JS. Im ersten Beispiel erhalten wir die ID unseres Elements und fügen zB 2 Klassen hinzu.

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

Im zweiten Beispiel erhalten wir den Klassennamen des Elements und fügen 1 weitere hinzu.

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

Vasyl Gutnyk
quelle

1

Für diejenigen, die Lodash verwenden und die classNameZeichenfolge aktualisieren möchten :

// 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
quelle

0

Geben Sie dem Div zuerst eine ID. Rufen Sie dann die Funktion appendClass auf:

<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
quelle

1

es wird die Klasse nicht anhängen ersetzen! Vielleicht fehlt eine Zeile oder eine alte Klasse + "" + classToAppend anstelle der letzten classToAppend

Vinze

indexOfist eine naive Lösung und hat ein Problem bereits aufgezeigt .

Dan Dascalescu

0

Mit der API querySelector können Sie Ihr Element auswählen und anschließend eine Funktion mit dem Element und dem neuen Klassennamen als Parametern erstellen. Verwenden der Klassenliste für moderne Browser, sonst für IE8. Dann können Sie die Funktion nach einem Ereignis aufrufen.

 //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
quelle

Dies wurde bereits zusammen mit der Browserunterstützung besprochen .

Dan Dascalescu

0

Kürzeste

image1.parentNode.className+=' box';

Code-Snippet anzeigen

image1.parentNode.className+=' box';

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

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

Erweitern Sie das Snippet

Kamil Kiełczewski
quelle

0

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

ODER:

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

Der erste Ansatz half beim Hinzufügen der Klasse, wenn der zweite Ansatz nicht funktionierte.
Vergessen Sie nicht, einen Platz vor dem' someclassname' beim ersten Anflug .

Zum Entfernen können Sie verwenden:

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

Athira V Ajit
quelle

-4

Dieser JS-Code funktioniert für mich

bietet Ersatz für Klassennamen

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

Zum Hinzufügen einfach verwenden

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

Zum Entfernen verwenden

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

Hoffe, das ist für jemanden hilfreich

Anon
quelle

-9

Wenn Sie in YUI yuidom einschließen , können Sie verwenden

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

HTH

Alagu
quelle

12

Es hieß JavaScript, nicht jQuery oder YUI.

Radek

Wie füge ich einem bestimmten Element eine Klasse hinzu?

Antworten:

Wenn Sie nur auf moderne Browser abzielen:

Wenn Sie Internet Explorer 9 oder niedriger unterstützen müssen:

Klasse hinzufügen

Klasse entfernen

Verweise

Prototyp verwenden

Verwenden von YUI

So fügen Sie einem Element eine zusätzliche Klasse hinzu:

So ändern Sie alle Klassen für ein Element:

Kürzeste