Question

我正在尝试避免在禁用JS时添加在线样式。例如，我想在禁用JS时隐藏正文中的元素，但我只想从外部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>

有替代方案吗？谢谢！

Answer 1

“我想在禁用JS时隐藏正文中的元素”

您可以使用display:none创建一个类，如果禁用了javascript，则将其分配给要隐藏的所有元素，并通过javascript从这些元素中删除此类，如果javascript 已禁用 ，那么这个类将始终适用，并且不显示具有此类的所有元素

JS Fiddle

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

.secret {
  display: none;
}

Answer 2

您应使用<noscript>标记隐藏元素，在<style>标记中将其设为display:none。独立的CSS没有办法解决这个问题！但你可以用javascript或其他方法做到这一点，看看其他答案。

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

Answer 3

试试这段代码：

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

Answer 4

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

<script>

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

</script>

禁用JavaScript时添加元素样式

4 个答案: