DOM計測計算_html/css_WEB-ITnose

JavaScript ではラベル要素の位置を制御できます。たとえば、プロンプトメッセージがマウスの位置に合わせて移動します。

この章では、その取得方法を見てみましょう。要素の座標とその位置を計算します。

前提: CSS ボックス モデル

CSS ボックス モデルは以下のように描画されます。

詳細、CSS ボックス モデルの説明を表示できます。https://www.w3.org/TR/CSS22/ボックス モデルの構成を学習することは、他の知識ポイントの基礎となります。

ドキュメントの例

デモには次のボックスを使用します:

<div id="example">  ## Introduction     The contents. </div>

ボックスは、境界線、内側の境界線、外側の境界線、およびスクロール バーを使用して絶対に配置されます:

#example {  position: absolute;  width: 300px;  height: 200px;  left: 160px;  top: 160px;  padding: 20px;  margin: 20px;  overflow: auto;  border: 25px solid #F0E68C;}

CSS 画像:

ボックスのメトリクス

• CSS の幅/高さ

• コンテンツ領域のサイズは以下の範囲内ですCSS プロパティを設定するには element.style を使用し、()/currentStyle を取得するには getComputedStyle を使用します。詳細については、後の記事を参照してください。

次に、width とその他のプロパティについて学びます。 height.

すべての Javascript メトリクス これらはすべてピクセルであり、属性値の末尾に「px」は必要ありません。

クライアント領域のサイズ: パディングを含むコンテンツ領域のサイズ。ただし、スクロール バーは含まれません。

サイズは次のように計算されます。

• スクロールハイト = 723: スクロール部分を含む全高

• スクロール幅 = 324: スクロール部分を含む全幅

• offsetWidth = 390: 外側のフレーム ボックスの幅

• offsetHeight = 290 : 外枠ボックスの高さ

• clientLeft = 25 : 左サイズ

• clientTop = 25 : 上サイズ

1. 右から左の場合ドキュメント (アラビア語、ユダヤ語) の場合、clientLeft 属性には右スクロール サイズも含まれます

2. IE<8 および IE8 互換モード: document .documentElement (または例外モードの document.body) は変更されますドキュメントの左上隅から少し離れた位置に境界線はありませんが、この場合 document.body.clientLeft/clientTop は 0 にはなりません (通常は 2)。

   offsetParent 、 offsetLeft/Top

• その他の配置モード: 最も近い配置要素

非表示要素
JavaScript の座標とサイズの設定は、要素の接続と表示のみを目的としています

値が 0、display:none、または DOM の外にある要素。offsetParent が null です。

要素が非表示の場合は、次のメソッドを使用して確認できます:

関数isHidden(elem)

return !elem.offsetWidth && !elem.offsetHeight

}

• 親要素がdisplay:noneの場合、実行

• TR 要素は正常に実行されますが、一部のブラウザでは TR にバグが発生しますが、他の要素は通常チェックされるため、通常どおり使用してください。 >

  要素が可視性:非表示または画面外に配置されている場合、このチェックは無効になります。

• 概要:

• scrollWidth/scrollHeight - スクロールするコンテンツ領域が含まれますが、スクロール バー自体のサイズは含まれません

• scrollLeft/scrollTop - スクロール バーの移動部分、開始点

• offsetWidth/offsetHeight - マージンを含むボックスのサイズ

• offsetParent - 最も近いセル、本体を基準とした静的な位置。または最も近い位置にある要素。

• offsetLeft/offsetTop - offsetParent を基準としたボックスの左上隅の位置。すべてのプロパティの意味:

• この記事の元の記事は Wu Tongwei のブログ、

  WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233

  に属します。転載時の対応リンク: http://www.wutongwei.com/front/infor_showone.tweb ?id=232、皆さんも拡散、共有を歓迎します。