CSS für wenn JavaScript aktiviert ist

document.documentElement.className = "js"

Dies fügt dem Stamm-<html>-Element eine Klasse hinzu, sodass Sie zum Beispiel ein <div> nur dann ausblenden könnten, wenn JavaScript aktiviert ist.

.js div#id { display: none; }

Kommentare

James

# 4. September 2009

Dies fügt der Body-Klasse keine hinzu; es fügt dem Stammelement (d. h. dem "html"-Tag) eine Klasse hinzu…

Antworten

Chris Coyier

Permalink zum Kommentar# 4. September 2009

behoben.

# 19. Oktober 2009

Die jQuery-Version davon (nicht, dass Sie sie wirklich brauchen, aber wenn Sie sie sowieso verwenden) ist

$("body").addClass("js");

Ich setze sie immer ganz oben, zusammen mit allem anderen Generischen. Ich verwende auch normalerweise die Klasse "has-js", einfach weil mir ein zweibuchstabiger Klassenname Angst macht (Plugins oder was auch immer) und er ein winziges bisschen aussagekräftiger ist.

Antworten

Jaybuz

Permalink zum Kommentar# 29. April 2012
Die Idee dieses Codes ist, so schnell wie möglich zu sein. Er sollte direkt unter Ihren CSS-Dateien im Head-Element als einfacher JavaScript-Snippet platziert werden. Sie sollten jQuery am Ende Ihres Dokuments kurz vor dem schließenden body-Tag laden, da das Herunterladen von JavaScript-Dateien das Rendern der Seite blockiert.

Persönlich verwende ich diesen Schnipsel
```
<script>(function(h){h.className = h.className.replace('no-js', 'js')})(document.documentElement)</script>
```
Er ersetzt die Klasse "no-js" durch "js" im HTML-Element, während alle anderen Klassennamen, die vorhanden sein mögen, beibehalten werden.
mike

Permalink zum Kommentar# 11. Juni 2013

Realistisch gesehen wird dies nicht so gut funktionieren wie die anderen Beispiele.
Sie müssen jQuery herunterladen (und wahrscheinlich auch das gesamte CSS und die Bilder), bevor es den Klassennamen hinzufügen kann.

Das führt zu gelegentlichen kurzen Einblendungen von "no-js"-Inhalten, bevor der jQuery-Befehl greift und das CSS auslöst.

Diese Methode wird besser als eigenständiges JS direkt nach dem Seitentitel und vor jeglichem CSS beschrieben

<script type=”text/javascript”>/<![CDATA[/document.documentElement.className=”hasJS”;/]]>/</script>

Funktioniert für mich seit über 6 Jahren unglaublich gut.

elundmark

# 11. Februar 2010

Ich habe einen zusätzlichen Trick für euch; Zusätzlich zu dieser Klasse, die zum Body hinzugefügt wird, entferne ich eine Klasse, die im Body-Tag war. Ein Benutzer ohne JS erhält also
<body class="xhtml">
während ein Benutzer mit aktiviertem JS erhält
<body class="js">
(… durch Entfernen der Klasse 'xhtml' und Hinzufügen von 'js')

= Durch das Vorhandensein einer Standardklasse im Body-Tag lassen sich "Flash on Load"-Korrekturen einfacher durchführen, z. B. beim Ersetzen von Links durch Flash-Inhalte, und ich finde, dass es das CSS erheblich vereinfacht und verschönert ;)

Antworten

Ant

# 16. Mai 2010

Ich benutze es oft, um alle versteckten Menüs zu öffnen und sie zu schließen, wenn JS aktiviert ist.

Antworten

Wayne Parkes

# 25. Juni 2012

Ich verwende die im Artikel beschriebene Technik, empfehle aber, vor der Klasse ein Leerzeichen hinzuzufügen, wie folgt: " js". So wird sie leicht an die Klassenzeichenkette angehängt, wenn bereits Klassen vorhanden sind, andernfalls wird das Leerzeichen einfach ignoriert.

Antworten

Mayank

# 29. September 2012

Ich habe ein Theme heruntergeladen, das offline perfekt funktioniert. Aber als ich das Gleiche auf einem Webserver hochgeladen habe, funktioniert es nicht. Die Seite scheint leer zu sein. Das Theme basiert auf DOM.

    <script>
        //* hide all elements & show preloader
        document.documentElement.className += 'js';
    </script>

        <script>
            $(document).ready(function() {
                //* show all elements & remove preloader
                setTimeout('$("html").removeClass("js")',1000);
            });
        </script>

Können Sie mir bitte dabei helfen??

Antworten

Reza Baiat

# 28. November 2012

document.documentElement.className += ‘ js ‘; // HINWEIS: ‚[Leerzeichen]js[Leerzeichen]‘

<script>
$(document).ready(function() {
    setTimeout(function(){
        document.documentElement.className = 
                 document.documentElement.className.replace(/\sjs\s/, ' ');
    },1000);
});
</script>

Kommentare

Eine Antwort hinterlassen Antwort abbrechen