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

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 3

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 4

Try

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

Noscript