2016-03-31 4 views
1

ich gestern ein wenig Hilfe gestern mit einem Projekt bekam, das die folgende Codezeile enthalten:einen leeren Raum in einer Active-Klasse Mit

document.getElementById("test").className += " active" 

Zuerst konnte ich es nicht zu arbeiten, weil ich wasn‘ t den Leerraum vor dem "aktiven" Teil hinzufügen. Sobald ich es hinzugefügt habe, funktionierte der Code gut.

Warum müssen Sie dies tun? Ist das ein JS-Ding?

+3

Anscheinend hat Ihr Element bereits eine Klasse, und das Ändern von 'somethingactive' ist etwas anderes als das Ändern des' some active'. Verwenden Sie ['.classList.add (...)'] (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), wenn Sie Leerzeichen vermeiden möchten. – Bergi

+0

Der Wert des Attributs 'class' ist eine Menge von Wörtern (Klassennamen), die durch Leerzeichen getrennt sind. Wenn Sie der Klassenzeichenfolge Buchstaben hinzufügen und sie mit einem Wort enden, ändern Sie nur den Klassennamen. – Pointy

Antwort

2

Die Antwort von Spencer bereits die Gründe für den Raum erklärt. Ich wollte nur darauf hinweisen, dass das Lesen und Schreiben von Klassennamen vereinfacht werden kann mit classList. Zum Beispiel, nur den folgenden Code verwenden, um eine Klasse hinzuzufügen:

document.getElementById("test").classList.add("active"); 

Und um es zu entfernen, führen:

document.getElementById("test").classList.remove("active"); 

Beachten Sie auch, dass Sie den JavaScript-Shim in der Verbindung wie definiert hinzufügen sollten oben Unterstützen Sie Internet Explorer 8 und 9.

2

Da viele Klassen für ein Element für das Klassenattribut durch Leerzeichen getrennt sind, mussten Sie ein Leerzeichen hinzufügen, da Sie bereits eine oder mehrere Klassen für das Element besitzen. Zum Beispiel, ohne den Raum würden Sie haben:

class="fooactive" // A single class "fooactive" that doesn't exist 

Wie es die beiden Werte verketten werden, anstatt sie als zwei separate Klassen zu lesen. Sie müssen also einen Raum, um so das class Attribut wird sie als separate Klassen lesen:

class="foo active" // Two classes "foo" and "active" 
Verwandte Themen