Define css if javascript is not enabled

Question

I want to define .exampleclass img {height:250px} if javascript is not enabled. Is their anyway to undo this in javascript / jquery?

Answer 1

put a "no-js" class on your body element, and then remove it with JS at load, and use .no-js in the selector for your CSS

Answer 2

Best not to mess with CSS via JS in that way. Try this:

<noscript>

    <link href="no-js.css" type="text/css" rel="stylesheet" />

</noscript>

Answer 3

I use something like this...

JavaScript

document.body.className += ' javascript';

jQuery

$('body').addClass('javascript');

CSS

.exampleclass img {height: 250px}

.javascript .exampleclass img {height: 500px}

Answer 4

The most elegant way is to have in your CSS something like:

.exampleclass img {height:250px}
.js .exampleclass img {height:auto;}

and in your JS:

var dd = document.documentElement;
dd.className += ((dd.className == "") ? "js" : " js");

so that the second CSS rule will override the first one in case JS is enabled

Answer 5

In the future (if and when browsers start supporting it), it will be possible to use the scripting CSS media feature:

@media (scripting: none) {
  // Styles to apply if JS is disabled
}

Answer 6

Try

<noscript>
    <style type="text/css">
        .exampleclass img {height:250px}
    </style>
</noscript>

Noscript