禁用 JavaScript 时添加元素样式答案

【问题标题】：Add element styling when JavaScript is disabled禁用 JavaScript 时添加元素样式
【发布时间】：2016-02-13 16:22:45
【问题描述】：

我试图避免在禁用 JS 时添加在线样式。例如，当 JS 被禁用时，我想在 body 中隐藏一个元素，但我只想从外部 CSS 中做到这一点。

我想避免添加如下样式

<noscript>
    <style>
    ...some style
    </style>

    <p class="no-js">You need Javascript enabled to view all of the content on this page.</p>
</noscript>

<body>
    <div>element to hide when js disabled</div>
</body>

是否有替代方案？谢谢！

【问题讨论】：

CSS 无法检测 JavaScript 是否或何时被禁用；而是使用 JavaScript 在启用时显示元素，这意味着禁用 JavaScript 时它将隐藏。
如果没有损坏，请不要修复它；-)

标签： javascript html css noscript

【解决方案1】：

" 当JS被禁用时，我想在body中隐藏一个元素 "

你可以用display:none创建一个类，如果javascript被禁用，将它分配给你想要隐藏的所有元素，如果javascript被disabled，则通过javascript从这些元素中删除这个类，然后该类将始终应用，并且该类的所有元素都不会显示

JS Fiddle

var secrets = document.querySelectorAll('.secret');
for (var i in secrets) {
  secrets[i].classList.remove('secret');
}

.secret {
  display: none;
}

【讨论】：

【解决方案2】：

试试这个代码：

<noscript>
  <style>
     #foo {
        display:none;
     }
  </style>
</noscript>

【讨论】：

【解决方案3】：

你应该使用<noscript>标签来隐藏一个元素，在<style>标签中使它成为display:none。独立的 CSS 没有办法做到这一点！但您可以使用 javascript 或其他方式执行此操作，请查看其他答案。

<noscript>
    <style type="text/css">
        .divtohide {display:none;}
    </style>
    <div class="divtohide">
    Javascript is disabled!
    </div>
</noscript>

【讨论】：

你看问题了吗？ OP 已经在这样做了。
是的，这就是我的解决方案。但我想知道是否可以避免在 noscript 标签中使用样式。我想知道是否有更好的选择。
如果由我决定，我更喜欢使用这种方法，但我认为没有更好的方法可以做到这一点，正如我所说的你可以使用javascript，但这种方法比其他。

【解决方案4】：

或者，只需使用Javascript隐藏告诉用户他们需要启用js的div（如果禁用Javascript，显然它无法隐藏div，它会显示出来）。

<script>

  document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById('nojs').style.display = "none";
  });

</script>

【讨论】：