Mam proste i elastyczne rozwiązanie, nieco podobne do Will'a (ale z dodatkową zaletą bycia prawidłowym html):
Nadaj elementowi body klasę „jsOff”. Usuń (lub zamień) to na JavaScript. CSS ma ukryć wszystkie elementy z klasą „jsOnly” z elementem nadrzędnym z klasą „jsOff”.
Oznacza to, że jeśli JavaScript jest włączony, klasa „jsOff” zostanie usunięta z treści. Oznacza to, że elementy z klasą „jsOnly” nie będą miały rodzica z klasą „jsOff”, a więc nie będą pasować do selektora CSS, który je ukrywa, więc zostaną wyświetlone.
Jeśli JavaScript jest wyłączony, klasa „jsOff” nie zostanie usunięta z treści. Elementy z „jsOnly” będą miały rodzica z „jsOff”, a więc będą pasować do selektora CSS, który je ukrywa, więc będą ukryte.
Oto kod:
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
To poprawny html. To jest proste. Jest elastyczny.
Po prostu dodaj klasę „jsOnly” do dowolnego elementu, który chcesz wyświetlać tylko wtedy, gdy włączony jest JS.
Zwróć uwagę, że JavaScript, który usuwa klasę „jsOff”, powinien być wykonywany jak najwcześniej wewnątrz tagu body. Nie można go wykonać wcześniej, ponieważ tagu body jeszcze nie ma. Nie należy go wykonywać później, ponieważ będzie to oznaczać, że elementy z klasą „jsOnly” mogą nie być od razu widoczne (ponieważ będą pasować do selektora CSS, który je ukrywa, dopóki klasa „jsOff” nie zostanie usunięta z elementu body).
Mogłoby to również zapewnić mechanizm stylizacji tylko js (np. .jsOn .someClass{}) I stylów no-js (np .jsOff .someOtherClass{}.). Możesz go użyć jako alternatywy dla <noscript>:
.jsOn .noJsOnly{
display:none;
}