Ich schätze die Klarheit von diesem Trick, den Mikael Ainalem auf Reddit gepostet hat.
Es ist eine Einzeiler, der die Klasse auf dem <body> umschaltet, damit Sie verschiedene Zustände simulieren und zwischen ihnen per Klick wechseln können.
<body onclick="this.classList.toggle("active");">Könnte auch auf jedem Element sein!
Das kann eine große Sache sein. Sehen Sie „The Power of Changing Classes“ als Beispiel. Selbst wenn Sie kein JavaScript-Enthusiast sind, ist classList vielleicht die einzige API, die Sie kennen sollten.
Der
onclick-Handler stammt aus dem Jahr 1996 und ist etwas, das ich bei sehr vielen Leuten gesehen habe und ich wünschte, es würden weniger Leute ihn verwenden, weil er die Implementierung von Content-Security-Policy erschwert. Zum Lernen, für kleine Tests und Demos sind diese in Ordnung, da selten jemand CSP in diesen Fällen implementieren wird.Andererseits stammt
classListaus dem Jahr 2010 und ich hoffe, dass dies eine große Sache wird. Nun, für mich ist es bereits eine große Sache: Ich benutzeclassListnie mehr (selbst IE 10 unterstützt es).Das Umschalten von Klassen ist so mächtig, aber das onclick-Attribut wird nicht empfohlen. Verwenden Sie ein Tag und schreiben Sie darin oder in eine andere .js-Datei. So:
document.querySelector("button").addEventListener(e => e.currentTarget.classList.toggle("active"));CSS gehört in ein Style-Tag oder eine .css-Datei und JavaScript gehört in ein Script-Tag oder eine .js-Datei, das ist der Hauptweg.
Ich glaube, Sie haben diesen Teil übersehen.
„Einer der Tricks, die ich am häufigsten verwende, wenn ich Demos erstelle, ist der Body-Toggle-Aktivzustand. Er gibt mir schnell eine Möglichkeit, Toggle-Zustände in CSS zu testen. Z.B. .active .something { … }“
Das ist nicht in der Produktion. Sie benutzen es einfach, um verschiedene Zustände zu testen.
Das benutze ich ab und zu.
Ich benutze es viel.
Ich möchte noch etwas hinzufügen.
Sie können den zweiten Parameter der „toggle“-Methode verwenden.
Anstatt die Klasse „active“ umzuschalten, könnten wir den zweiten Parameter als Bedingung verwenden. Wenn er wahr ist, wird die Klasse „active“ hinzugefügt, und wenn nicht, wird die Klasse entfernt.
https://jsfiddle.net/az2Ldpuw/, wo Sie einen Anwendungsfall prüfen können, bei dem das Umschalten sicherstellt, dass nur ein Element aktiv ist (es entfernt das „active“ vom vorherigen aktiven Element und fügt die Klasse dem angeklickten Element hinzu).
Ich habe eine neue Version hinzugefügt https://jsfiddle.net/az2Ldpuw/2/, wo es zwei Anwendungsfälle gibt: eine Radio-Button-ähnliche Situation (mit dem zweiten Argument) und eine Checkbox-Situation.