it-swarm.com.de

Wie ändert man einen CSS-Klassenstil durch Javascript?

Laut dem Buch, das ich gerade lese, ist es besser, eine CSS nach Klassen zu ändern, wenn Sie Javascript zum Ändern von CSS verwenden. Aber wie? Kann jemand dafür ein Beispiel-Snippet geben?

42
sasori

Angenommen, Sie haben:

<div id="mydiv" class="oldclass">text</div>

und die folgenden Stile:

.oldclass { color: blue }
.newclass { background-color: yellow }

Sie können die Klasse für mydiv in Javascript folgendermaßen ändern:

document.getElementById('mydiv').className = 'newclass';

Nach der DOM-Manipulation verbleiben Sie mit:

<div id="mydiv" class="newclass">text</div>

Wenn Sie eine neue CSS-Klasse hinzufügen möchten, ohne die alte zu entfernen, können Sie sie anfügen:

document.getElementById('mydiv').className += ' newClass';

Dies führt zu:

<div id="mydiv" class="oldclass newclass">text</div>
63
Asaph

Da classListin allen gängigen Browsern unterstützt wird und jQuery löscht Unterstützung für IE <9 (in 2.x-Zweig als Stormblack-Punkte im Kommentar), unter Berücksichtigung dieses HTML-Codes

<div id="mydiv" class="oldclass">text</div>

sie können diese Syntax bequem verwenden:

document.getElementById('mydiv').classList.add("newClass");

Dies führt auch zu:

<div id="mydiv" class="oldclass newclass">text</div>

außerdem können Sie auch remove, toggle, Methods verwenden.

12
Jan Turoň

Ich würde jQuery wärmstens empfehlen. Es wird dann so einfach wie:

$('#mydiv').addClass('newclass');

Sie müssen sich nicht um das Entfernen der alten Klasse kümmern, da addClass () nur dazugehängt wird. Sie haben auch removeClass ();

Der andere Vorteil gegenüber der Methode getElementById () ist, dass Sie sie mit einer einzigen Codezeile auf mehrere Elemente gleichzeitig anwenden können.

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

Im ersten Beispiel wird die Klasse allen DIV-Elementen auf der Seite hinzugefügt. Im zweiten Beispiel wird die neue Klasse allen Elementen hinzugefügt, die derzeit die alte Klasse haben.

10
Andy Shellam

verwenden Sie die className-Eigenschaft:

document.getElementById('your_element_s_id').className = 'cssClass';
5
knittl

document.getElementById("my").className = 'myclass';

4
Adir

Es gibt zwei Möglichkeiten, wie dies mit Vanilla Javascript erreicht werden kann. Der erste ist className und der zweite ist classList. className funktioniert in allen Browsern, kann jedoch unhandlich sein, wenn das Klassenattribut eines Elements geändert wird. classList ist eine einfachere Möglichkeit, die Klasse (n) eines Elements zu ändern.

Um das Klassenattribut eines Elements vollständig festzulegen, ist className der richtige Weg. Andernfalls ist es einfacher, die Klassen eines Elements mit classList zu ändern.

Anfängliches Html

<div id="ID"></div>

Festlegen des Klassenattributs

var div = document.getElementById('ID');
div.className = "foo bar car";

Ergebnis:

<div id="ID" class="foo bar car"></div>

Hinzufügen einer Klasse

div.classList.add("car");// Class already exists, nothing happens
div.classList.add("tar");

Hinweis: Vor dem Hinzufügen muss nicht geprüft werden, ob eine Klasse vorhanden ist. Wenn eine Klasse hinzugefügt werden muss, fügen Sie sie einfach hinzu. Wenn es bereits vorhanden ist, wird kein Duplikat hinzugefügt.
Ergebnis:

<div id="ID" class="foo bar car tar"></div>

Entfernen einer Klasse

div.classList.remove("car");
div.classList.remove("tar");
div.classList.remove("car");// No class of this name exists, nothing happens

Hinweis: Wenn eine Klasse entfernt werden muss, entfernen Sie sie genau wie add. Wenn es da ist, wird es entfernt, sonst passiert nichts.
Ergebnis:

<div id="ID" class="foo bar"></div>

Überprüfen, ob ein Klassenattribut eine bestimmte Klasse enthält

if (div.classList.contains("foo")) {
  // Do stuff
}

Eine Klasse umschalten

var classWasAdded = div.classList.toggle("bar"); // "bar" gets removed
// classWasAdded is false since "bar" was removed

classWasAdded = div.classList.toggle("bar"); // "bar" gets added
// classWasAdded is true since "bar" was added

.toggle hat einen zweiten booleschen Parameter, der meiner Meinung nach redundant ist und es nicht wert ist, darüber nachzudenken.

Weitere Informationen zu classList finden Sie unter MDN . Es behandelt auch Browserkompatibilität , wenn dies ein Problem ist, das mithilfe von Modernizr zur Erkennung und bei Bedarf mithilfe einer Polyfüllung behoben werden kann.

4
nwayve

Wenn Sie die tatsächliche CSS-Klasse bearbeiten möchten, anstatt die DOM-Elemente zu ändern oder CSS-Klassen für Modifikatoren zu verwenden, siehe https://stackoverflow.com/a/50036923/482916 .

1
gmoz22

Sie können auch mit jQuery daran interessiert sein, es zu ändern: http://api.jquery.com/category/css/

1
Juri
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("div").addClass(function(){
            return "par" ;
    });
});
</script>
<style>
.par {
    color: blue;
}
</style>
</head>
<body>
<div class="test">This is a paragraph.</div>
</body>
</html>
0
chanakya s