html - How to use a different CSS stylesheet if a user has JavaScript disabled in their browser?

I am developing a website for someone, and the CSS styles I use require JavaScript (for the buttons that are used for a dropdown navigation bar on small screens). How can I use one stylesheet if the user has JavaScript enabled or use another one if JavaScript is disabled.

Share Improve this question edited Sep 11, 2015 at 2:12 Sean Vieira 160k34 gold badges320 silver badges296 bronze badges asked Sep 11, 2015 at 2:10 scarecrow850 2191 gold badge3 silver badges11 bronze badges

2 append the stylesheet with JavaScript... – epascarello Commented Sep 11, 2015 at 2:10
1 document.write or appendChild – epascarello Commented Sep 11, 2015 at 2:13
What exactly did you mean by appending the stylesheet with Javascript though – scarecrow850 Commented Sep 11, 2015 at 2:16
Well if JavaScript is supported it will be added since you used JavaScript to add it. – epascarello Commented Sep 11, 2015 at 2:20

Add a ment |

5 Answers 5

Sorted by: Reset to default 6

Two ways to do it:

Append the JavaScript-only stylesheets with JavaScript:

function appendStyle(url) {
  var sheet = document.createElement("link");
  sheet.setAttribute("href", url);
  sheet.setAttribute("rel", "stylesheet");
  sheet.setAttribute("type", "text/css");
  document.head.appendChild(sheet);
}

If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
```
<noscript>
  <link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
```

You can use like this...

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="general css file" />
        <noscript>
          <link rel="stylesheet" href="CSS file for JS dissable" />
        </noscript>

This works for me

modernizr, the defacto standard for feature detection uses a "no-js" class on the body element, then when the page loads it uses javascript to remove this class. then you dont need seperate sheets you just need to precede your javascriptless styles with ".no-js".

.no-js .some-div {
   background-color: #fff;
}

.some-div {
    background-color: #000;
}

What is the purpose of the HTML "no-js" class?

You can use alternate stylesheets, with the sheet for disabled JS set as the preferred one:

<link id="sheet-nojs" rel="stylesheet" href="..." title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="..." title="JS enabled" />

And then use JS to set the sheet for enabled JS as the preferred one:

document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;

<link id="sheet-nojs" rel="stylesheet" href="data:text/css,
   body { background: red; }
   body:before { content: 'JS disabled'; }
" title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="data:text/css,
   body { background: lime; }
   body:after { content: 'JS enabled';}
" title="JS enabled" />
<script>
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
</script>

<script type="text/javascript">
    // create the link element
    var jsStyles = document.createElement('link');
    // reference the stysheet
    jsStyles.setAttribute('href', 'path/to/stylesheet.css');
    // add it to the head element
    document.head.appendChild(jsStyles);
</script>
<!-- use a "noscript" tag for browsers that have javascript disabled -->
<noscript>
    <link href="path/to/no-js-styelsheet.css" />
</noscript>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to use a different CSS stylesheet if a user has JavaScript disabled in their browser? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)