禁用 JS 时隐藏内容的样式答案

【问题标题】：Styles to Hide Content when JS is Disabled禁用 JS 时隐藏内容的样式
【发布时间】：2014-08-05 01:32:14
【问题描述】：

我有一个通常可见按钮的网站。如果禁用了 javascript，那么我想对用户隐藏该按钮。我尝试使用以下代码：

<noscript>
 <style>
   .cart-opt{display:none;}
 </style>
  <br>
 <div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE SHOULD BE SHOWN WITH JS ENABLED--> </div>

这不起作用。即使<style> 标签被包裹在<noscript> 标签中，即使启用JS，它仍然被读取并隐藏按钮。

如何编写样式，以便除非禁用 JS，否则不会读取 <style> 标签？

注意：我使用的是 HTML 5。

【问题讨论】：

你可以用

标签： javascript css noscript

【解决方案1】：

这不是替代解决方案吗？

<noscript>
 <div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
 <div style="display:none">
</noscript>

<div class="cart-opt opt-btns"> <!-- BUTTONS HERE --> </div>

<noscript>
  </div>
</noscript>

【讨论】：

有趣的选项。我去看看。

【解决方案2】：

您可以改为使用<noscript> 包裹按钮，或者您可以最初隐藏按钮（使用 CSS），然后使用 JavaScript 显示它。在这种情况下，如果没有 JavaScript，按钮将不会显示

另外，在<noscript>中留下标题通知（提示用户使用JS的那个）。

【讨论】：

【解决方案3】：

使它们最初按类隐藏。

<style>.jscriptenabled{display:none;}</style>

如果允许使用 JavaScript，它们就会变得可见！

<script>
document.write('<style> .jscriptenabled{display:inherit;} </style>');
</script>`

【讨论】：