web-dev-qa-db-ja.com

CSSとJavaScriptでDIVを非表示にします

ディスプレイをnoneに設定し、可視性をhiddenに設定することにより、JavaScriptでDIVタグを非表示にすることができました。このクラスでも実現できます：

.invisible {
    display: none;
    visibility: hidden;
}

何も表示しないとDIVボックスが空になり、非表示にすると表示されなくなります。このメソッドの問題は、コンテンツをオーバーフローさせるスクロール可能なDIVまたはテキストエリアがある場合、表示を設定するときです：なし、一部のブラウザーはこれらの要素のスクロール位置を忘れます。 displayプロパティを使用せずにDIVを非表示にするより良い方法はありますか？可能であれば、スクロール位置などを記録するためにJavaScriptを使用することに頼るつもりはありません。

編集：

私はあなたの助けを借りてそれを解決することができました、私は次を適用しました：

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

私は左に試しました：-9999px、しかしこれはIEの垂直スクロールバーを拡張します...また、textareaは別のDIVでラップし、それに対して可視/不可視のスタイルを適用しました。これをChrome、Firefox、IEおよびiPhoneのSafariでテストしました。注意してください。スクロール可能なDIVは現在問題ありません。ご協力ありがとうございます。

javascriptcsshtmlinvisible
19
Aram Kocharyan

これはおそらく機能するでしょう：

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT：HTML5ボイラープレートコードの common helpers を見て、物事を消滅させる他の方法を検討します。

8
Bryan Downing

要素を非表示にしたいがレンダリングしたい場合は、visibility:hiddenを使用できます。 display:noneはそれを完全に削除し、あなたが言及したスクロール動作を引き起こします。

23
Chris Van Opstal

JQuery hide（）メソッドを使用できます。 $（ '＃DivID'）。hide（）; $（ '。Div Class'）。hide（）;

5
Ali

jQueryを使用してソリューションを実現できます。 divを完全に非表示/表示したい場合は、次を使用できます。

$('#my_element').show()
$('#my_element').hide()

また、divが非表示になり、ページ内にまだ存在するようにしたい場合は、効率的なトリックを使用できます。

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum
4
Arsman Ahmad

レイアウト面では、display：noneはレンダリングツリーからこのn界のリンボに完全に移動します。明確な寸法や位置はもうありません。

スクロール位置にプレースホルダーが必要な場合は、プレースホルダー要素を使用することをお勧めします。高さゼロのDIVまたは<a name="something""></a>動作します。

3
jpsimons

むしろ、固定の高さと幅（height：0; width：0;）を使用します。ボーダー、パディング、マージンを削除することを忘れないでください。

2
Macarrao