5

我已经找到了这个问题的许多部分答案，但似乎没有一个明确的答案。对于如此重要​​的技术，我觉得这有点奇怪。

我应该如何隐藏元素（使用javascript），以便在JS有机会隐藏它们之前在页面加载时它们不会短暂出现？我不想最初用 CSS 将它们设置为隐藏，就好像用户没有 Javascript 一样，他们什么也看不到。

要清楚。我不是在问如何处理向没有 JS 的用户显示内容。那是一个完全不同的主题。我只想要一种可靠的方法在显示 HTML 元素之前隐藏它们。

所以我的要求：

  1. 最初使用 CSS 不隐藏 HTML 元素
  2. 如果 JS 可用，这些元素将被隐藏，因此它们永远不会显示，即使是瞬间也不会显示。这意味着将它们隐藏在正文末尾加载的 JS 中）。
4

4 回答 4

5

和 VKen 一样，我更喜欢使用moderizr和Paul Irish 的html元素结构（这是HTML5 Boilerplate使用的）

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

然后在样式表中：

.element-to-hide { display: none; }

.no-js .element-to-hide { display: block; }

效果很好，没有元素消失。

于 2012-10-12T16:54:33.097 回答
4

一种解决方案是使用 javascript 包含一个可选的 CSS 文件，您可以在其中隐藏这些 div。

把它放在你的HEAD部分：

<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>

在 hidden.css 中：

div.mySelector {
   display:none;
}

如果您没有要设置的额外 css，您也可以更简单地在 javascript 中内联 css 规则（仍在 HEAD 中）：

<script>
document.write('<style type="text/css">div.mySelector {display:none; }</style>');
</script>

如果 Javascript 不可用，则不会隐藏 div。如果它可用，CSS 将用于在显示之前隐藏 div。

于 2012-10-12T16:44:39.247 回答
2

使用后代组合器并尽快使主体成为类的成员。

<style>
    /* js only element */
    .js foo { display: none; }
</style>
</head>
<body>
<script> document.body.className += " js"; </script>
于 2012-10-12T16:44:49.900 回答
0

你可以做一个<noscript>标签并覆盖那些禁用 javascript 的初始 css

于 2012-10-12T16:45:31.897 回答