javascript - 如果禁用 javascript，如何在任何 X/HTML 元素上赋予 css 样式？

Question

我想从外部 css 文件中做到这一点。我在主 css 中有一个 div#abc 但我想仅在禁用 javascript 时为此 div 设置不显示

Answer 1

怎么样

<noscript>
  <style type="text/css">
  div#abc { display: none; }
  </style>
</noscript>

? 如果您真的想在外部 CSS 文件中执行此操作，请将其移入并在元素而不是样式属性no_js.css中引用此文件。link

然而，大多数情况下，反过来更方便：为禁用的 JS 设置默认值，然后让 JS 更改类名（例如）以更新样式。jQuery 示例：

$(document).ready(function () {
  $('.fancy_user_interface_element').addClass('additional_js_style_class');
});

Answer 2

我会让 div style="display: none;" 默认情况下，然后用 javascript 显示它。

<div id="abc" style="display: none;">
 ...
</div>

<script type="text/javascript">
    $(function() {
        $('#abc').show();  //using jQuery
    });
</script>

这样，如果您没有启用 javascript，则不会显示 div。我已经使用内联 CSS 展示了它，但您也可以使用 CSS 类来实现，只需从元素中删除该类即可。

 <style>
    .requires-javascript { display: none; }
 </style>

 <div id="abc" class="requires-javascript">
     ...
 </div>

 <script type="text/javascript">
     $(function(){
         $('.requires-javascript').removeClass('requires-javascript');
     });
 </script>

这种方式可以使其对页面上需要 javascript 的所有元素使用单个 jQuery 语句。

Answer 3

将要显示的元素放在 noscript 标记内，只有在禁用 javascript 时才会显示。

Answer 4

你要做的是在你的 javascript 中有一个事件，它将规则的样式从隐藏设置为不隐藏。让 CSS 始终将该元素设置为隐藏。如果他们关闭了 javascript，它永远不会取消隐藏它，因此它会被 CSS 隐藏。