当JS被禁用时隐藏内容的样式

Styles to Hide Content when JS is Disabled

本文关键字：样式 隐藏 JS      更新时间：2023-09-26

我有一个网站，通常有一个可见的按钮。如果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时。

我如何写样式，使<style>标签不读，除非JS被禁用?

注意:我使用HTML 5。

这不是另一种解决方案吗?

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

你可以用<noscript>包装按钮，或者你可以隐藏按钮最初(用CSS)，然后用JavaScript显示它。在没有JavaScript的情况下，按钮将不会显示

同时，将标题通知(提示用户使用JS的通知)留在<noscript>中。

让它们最初被类隐藏。

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

然后，如果JavaScript是允许的，他们将成为可见的!

<script>
document.write('<style> .jscriptenabled{display:inherit;} </style>');
</script>`
相关文章：