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


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

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

相关讨论

两种方法：

  • 使用JavaScript附加仅限JavaScript的样式表：

    1
    2
    3
    4
    5
    6
    7
    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标签：

    1
    2
    3
    <noscript>
      <link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
    </noscript>
    • 相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    <!DOCTYPE HTML>
    <html lang="en">
        <head>
            <link rel="stylesheet" href="general css file" />
            <noscript>
              <link rel="stylesheet" href="CSS file for JS dissable" />
            </noscript>

    这适合我

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

    1
    2
    3
    4
    5
    6
    7
    .no-js .some-div {
       background-color: #fff;
    }

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

    HTML"no-js"类的目的是什么？

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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" />

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <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);

    <!-- use a"noscript" tag for browsers that have javascript disabled -->
    <noscript>
        <link href="path/to/no-js-styelsheet.css" />
    </noscript>