4

HTMLで図を描きたいです。ポジショニング構造は次のようになります。

<div id='hostDiv'>
  <div id='backgroundDiv'>
    ... drawing the background ...
  </div>
  <div id='foregroundDiv' style='position: absolute;'>
    ... drawing the foreground ...
  </div>
</div>

前景にはテキストが動的に取り込まれる Table 要素が含まれているため、セルに入力されるテキストの量に応じて行の高さが変わる場合があります。前景の Table 要素の最終的な高さを予測するにはどうすればよいですか? 背景の正しい高さを設定するには、この情報が必要です。Javascript からテーブルを事前にレンダリングし、その高さを読み取る方法はありますか? それとも何か別のトリック？

PS。ブラウザのサイズが変更されると、hostDiv のサイズが変わる場合があります。

4

5 に答える 5

5

ターゲット ブラウザーで実際にレンダリングせずに高さを予測する方法はありません。

それができたら、(たとえば) jQueryを使用して要素の高さを取得できます。

var height = $('#myTable').height();
于 2008-10-02T12:03:41.017 に答える
3

jquery を使用すると、テーブルがユーザーに表示される前にテーブルの高さを実際に確認できます。次のような構成を使用します (上の人から自由にコードを借ります)。

$(document).ready(function () { var height = $('#myTable').height(); });
于 2008-10-02T12:06:26.143 に答える
1

ブラウザは、隣接する要素と表示ウィンドウのサイズに応じて要素をレンダリングおよび配置するため、読み込み後まで要素の全体的な高さを予測することはできません。

つまり、ほとんどの js ライブラリを使用して、探しているものを見つけることができます。プロトタイプでは、次のとおりです。

$('navlist-main').offsetHeight

これにより、各子要素のレンダリングされた高さ (スタイル設定された高さだけでなく) と関連する余白とパディングが再帰的に加算され、要素の高さの正確な数値が返されます。

于 2008-10-02T12:10:15.993 に答える
1

前景 div のサイズを変更する前にテーブルを表示したくない場合: テーブルに
style.visibility="hidden" を設定します。display:none とは異なり、これはドキュメント フローから div を削除しないため、フォアグラウンド div は引き続き適切なサイズになります (テーブルは単に表示されません)。

もちろん、許容できる場合は、 foregroundDiv を backgroundDiv に移動して、絶対位置を削除できます。backgroundDiv は自動的にサイズ変更され、foregroundDiv (およびテーブル) が含まれるようになります。

于 2008-10-02T12:11:40.700 に答える
0

ここでw3で定義されているように、DOM属性のいずれかを使用できると思います：clientHeight、offsetHeight、およびscrollHeight

これは clientHeight の使用法です。

document.getElementById("#Table").clientHeight;
document.getElementById("#Table").clientWidth;
于 2011-02-24T03:32:49.433 に答える