切换css for Javascript已禁用

Question

I´m having a problem switching css when Javascript is disabled.

I have this code:

<style type="text/css">.nonjsonly{display:none;}.jsonly{display:inline;}</style>
<noscript><style type="text/css">.nonjsonly{display:inline}.jsonly{display:none}</style></noscript>

Witch is working right now, but W3C doesn´t approve it, as noscript is illegal in html head (And the code is in head).

Any idea how it can be made?

Thanks in advance

Answer 1

A more appropriate way to handle this is to place your non-js CSS first, without any <noscript> tag, followed by a script which loads a stylesheet for JavaScript-capable clients. The JS-capable css should then cascade to override the basic sheet.

<style type='text/css'>
  /* baseline CSS for all clients */
</style>

<!-- Then a script loads an additional stylesheet which cascades to override the baseline -->
<!-- Obviously, won't get loaded by noscript clients -->
<script type='text/javascript'>
  document.write("<link type='text/css' rel='stylesheet' href='/path/to/js-friendly.css' />");
</script>

Answer 2

Put the default css first:

<style type="text/css" src="default.css" />

so the non-JS styles apply to everyone. Then use some JS to dynamically load the "js-enabled" styles:

<script type="text/javascript">
    css = document.createElement('link');
    css.setAttribute('rel', 'stylsheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', 'js-styles.css'); // change as needed
    document.getElementsByTagName('head')[0].appendChild(css);
</script>

which will override the non-js styles.

Answer 3

you can do something like this

<script>
    document.getElementsByTagName('body')[0].className += ' jsActive';
</script>

that script write the "jsActive" Class to the Body Element if Javascript is avalible. You don´t have a "noJavascipt" Class, but you can select with CSS and build you Funcitons

Answer 4

1. Use 1 stylesheet
2. Add .js to the html element via JavaScript
3. For styles that require JavaScript, prefix your selector with .js

Ex:

#foo

becomes

.js #foo

Even better, use Modernizr to detect more advanced features (it'll automatically add .js too).