Tengo una solución simple y flexible, algo similar a la de Will (pero con el beneficio adicional de ser HTML válido):
Dale al elemento body una clase de "jsOff". Elimine (o reemplace) esto con JavaScript. Tener CSS para ocultar cualquier elemento con una clase de "jsOnly" con un elemento padre con una clase de "jsOff".
Esto significa que si JavaScript está habilitado, la clase "jsOff" se eliminará del cuerpo. Esto significará que los elementos con una clase de "jsOnly" no tendrán un padre con una clase de "jsOff" y, por lo tanto, no coincidirán con el selector de CSS que los oculta, por lo que se mostrarán.
Si JavaScript está deshabilitado, la clase "jsOff" no se eliminará del cuerpo. Los elementos con "jsOnly" tendrán un padre con "jsOff" y también lo tendrá coincidirán con el selector de CSS que los oculta, por lo que estarán ocultos.
Aquí está el código:
<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>
Es HTML válido. Es simple. Es flexible
Simplemente agregue la clase "jsOnly" a cualquier elemento que desee mostrar solo cuando JS está habilitado.
Tenga en cuenta que el JavaScript que elimina la clase "jsOff" debe ejecutarse lo antes posible dentro de la etiqueta del cuerpo. No se puede ejecutar antes, ya que la etiqueta del cuerpo aún no estará allí. No debe ejecutarse más tarde ya que significará que los elementos con la clase "jsOnly" pueden no ser visibles de inmediato (ya que coincidirán con el selector de CSS que los oculta hasta que la clase "jsOff" se elimine del elemento del cuerpo).
Esto también podría proporcionar un mecanismo para el estilo solo js (por ejemplo .jsOn .someClass{}) y el estilo no solo js (por ejemplo .jsOff .someOtherClass{}). Puede usarlo para proporcionar una alternativa a <noscript>:
.jsOn .noJsOnly{
display:none;
}