5

私はこの質問に対する多くの部分的な答えを見つけましたが、決定的な答えのように見えるものは何もありません。そのような重要なテクニックについては、これは少し奇妙だと思います。

JSが要素を非表示にする前にページが読み込まれたときに要素が短時間表示されないようにするには、（javascriptを使用して）要素を非表示にするにはどうすればよいですか？ユーザーがJavascriptを持っていないかのように、CSSで最初に非表示に設定したくありません。ユーザーには何も表示されません。

明確にするために。JSを持っていないユーザーへのコンテンツの表示をどのように処理するかを尋ねているのではありません。それはまったく別のテーマです。HTML要素を表示する前に非表示にする信頼できる方法が必要です。

だから私の要件：

  1. HTML要素はCSSを使用して最初は非表示になりません
  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を使用して、これらのdivを非表示にするオプションのCSSファイルを含めることです。

これをあなたのHEADセクションに入れてください：

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

そしてhiding.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 に答える