Question

我已经找到了这个问题的许多部分答案，但似乎没有什么似乎是一个明确的答案。对于这样一个重要的技术，我发现这有点奇怪。

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

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

所以我的要求：

最初使用CSS
如果JS可用，则隐藏这些元素，以便它们永远不会显示，即使是瞬间也不会显示。这意味着将它们隐藏在身体末端加载的JS中。）

Answer 1

与VKen一样，我更喜欢使用moderizr和Paul Irish's structure for the html element（这是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; }

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

Answer 2

解决方案是使用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显示之前隐藏它。

Answer 3

使用后代组合子并尽快使身体成为一个成员。

<style>
    /* js only element */
    .js foo { display: none; }
</style>
</head>
<body>
<script> document.body.className += " js"; </script>

Answer 4

您可以执行<noscript>标记，并为禁用javascript的用户覆盖初始css

在页面加载之前隐藏HTML元素的正确方法是什么？

4 个答案: