web-dev-qa-db-ja.com

非表示要素のオフセットを取得します

非表示要素の座標を取得するにはどうすればよいですか? offset()は、非表示要素の使用をサポートしていません。ヒントはありますか?

40
Simon

要素に.hide()が呼び出されている場合、またはcssに_display:none_が含まれている場合、ブラウザーはそれをまったく表示しません。この場合、答えは直接ではありません。最近のjQueryでは、幅や高さを取得することもできません。

一方、要素を.show()した場合、実行ループ(そのイベントに対して実行するコードがなくなるとイベントが発生する)の前にそれを.hide()し、ブラウザはページの再レイアウトが強制され、表示と非表示の間のオフセットを取得できますが、強制的に再描画されることはないため、ユーザーにはメッセージが表示されず、失うことはありません。あなたが思うかもしれないほどのパフォーマンス。

49

visibility:hidden要素の座標を取得できますが、display:none要素はレンダリングツリーから除外されています。したがって、その位置は未定義です。

34
c-smile

クイックショー、実行、非表示の手順以外に、ロードマスクを使用して、画面(またはその一部)が見えないように見せかけることもできます。

これは、非表示の要素を含むマップで作業していたときに発生しました。これらの要素を表示せずにcss-positions/offsetsを読み取る必要がありました。私は使用できる3つの可能な方法を思いつきました:

  • 当面はマップ上にマスクをロードして、マップが非表示の要素を表示しないようにし、オフセットを読み取ります(問題:オーバーレイが親要素(マップ)も非表示にします)。これは、表示が必要な親要素がない場合に最適に機能します。

  • 非表示になっている要素のz-indexを変更して、親要素の背後に移動し、値を表示して読み取り、それらを非表示にして、z-indexを元の要素に変更します。

  • cSSスタイルには個別のデータ変数を使用して、要素の一部になるようにします。 css-positions/offsetsはwindow/elementのサイズに応じて変化しないため、要素がwindowまたは特定のelementに対して固定/絶対位置を持っている場合、これはうまく機能します。これは、ウィンドウに対して絶対的な要素(フルスクリーン/ウィンドウアプリケーション)を使用していたため、私の場合にはうまくいきました。

ユーザーによって提案された他の方法も機能しますが、それはすべて、作業している内容によって異なります。

0
Janne