Question

我正在为某人开发一个网站，我使用的CSS样式需要JavaScript（用于在小屏幕上用于下拉导航栏的按钮）。如果用户启用了JavaScript，我该如何使用一个样式表;如果禁用了JavaScript，我如何使用另一个样式表。

Answer 1

两种方法：

使用JavaScript附加仅限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);
}

如果您不介意加载JS的CSS并且只想覆盖网站的默认外观，则可以改为使用noscript标记：
```
<noscript>
  <link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
```

Answer 2

你可以这样使用......

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

这对我有用

Answer 3

modernizr，功能检测的事实标准在body元素上使用“no-js”类，然后在页面加载时使用javascript删除此类。那么你不需要单独的表单，你只需要在你的javascriptless样式之前加上“.no-js”。

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

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

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

Answer 4

您可以使用备用样式表，将禁用JS表设置为首选样式表：

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

然后使用JS将启用JS的工作表设置为首选：

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>

Answer 5

<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>

如果用户在浏览器中禁用了JavaScript，如何使用不同的CSS样式表？

5 个答案: