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

You could probably use HTML's noscript tag.

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

---

EDIT: I'm going to actually side with Stephen's answer as being the best. While the above might work, it might not be valid/following best practices.

Stephen answered:

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

The class could also be placed on your html element and then all styling that should appear when JavaScript is not available can be prefixed with html.no-js before what the selector would be otherwise. This is what HTML5 Boiler Plate does, for example.

Answer 2

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 3

Try

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

Noscript

Answer 4

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 5

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 6

One day we may have this

Not currently active in Chrome 83 Win10

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting

p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}

<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">Your scripting is only enabled during the initial page load. Weird.</p>
<p class="script-enabled">You have scripting enabled! :-)</p>

Answer 7

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 8

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
}