要素の長さと幅:
ノード.スタイル.幅/高さ
ブロックレベル要素のコンテンツの視覚的な幅/高さ + 水平/垂直パディング値:
node.clientWidth/clientHeight、純粋なインライン要素に対して取得される値は常に 0 です
ページ ビューポート (ブラウザがページ コンテンツを表示する領域) の寸法:
documentElement.clientWidth/clientHeight
要素コンテンツの視覚的な幅/高さ+水平/垂直パディング値+水平/垂直境界値:
ノード.オフセット幅/オフセット高さ
要素のコンテンツの表示幅/高さ + 水平/垂直パディング値 + 水平/垂直スクロールまたはオーバーフロー部分コンテンツの幅/高さ:
node.scrollWidth/scrollHeight、スクロール オーバーフロー コンテンツがない場合、この値は対応する ciientWidth/clientHeight と一致します。
- 純粋にインライン要素に対して取得される値は常に 0 です。
- ページ ビューポートのサイズは、documentElement.scrollWidth/scrollHeight を通じて取得できます。
現在のページのビューポートの幅/高さ:
window.innerWidth/innerHeight は通常、 documentElement.clientWidth/clientHeight と同等です。
window.outerWidth/outerHeight、現在のブラウザ ウィンドウ全体の幅/高さ、つまり、開いているブラウザ ソフトウェアによって表示される幅/高さを示します。
モバイル側の理想的なビューポートの場合、一般に innerWidth と externalWidth は等しい
画面の幅/高さの CSS ピクセル値:
window.screen.width/height/availWidth/availHeight
現在のブラウザの画面上で利用可能な幅/高さの CSS ピクセル値:
screen.availWidth/availHeight、または現在の状態でのブラウザの最大可能な幅/高さとして理解されます。
screen.width は、必ずしも screen.availWidth と等しいとは限りません。他のガジェットが画面スペースを占有している場合、ブラウザはガジェット (タスクバーなど) が占有するスペースを占有することができない場合があります。
ブラウザ ウィンドウからの要素の寸法:
node.getBoundingClientRect() の場合、このメソッドの戻り値は幅と高さの 2 つのサイズ プロパティを持つオブジェクトです。標準のボックス モデルの場合、要素のサイズは幅/高さ + パディング + ボーダーの合計に等しくなります-幅。box-sizing: border-box の場合、要素のサイズは幅/高さに等しくなります。
イベント.ページX/Y、スクリーンX/Y、クライアントX/Y
DOM イベントから Event オブジェクト
pageX/Y は、ページ全体の左上隅を基準としたイベント トリガー位置の位置を示します (ページのスクロール距離を含む)。
screenX/Y は、画面の左上隅を基準としたイベント トリガー位置の位置を示します。
clientX/Y は、現在のページの表示領域の左上隅を基準としたイベント トリガー位置の位置を示します
ノード.オフセット上/オフセット左
最も近い位置にある祖先要素に対する現在のノード要素の上/左の境界パディングの位置を示します。
ノード.scrollTop/scrollLeft
現在のノード要素内でスクロールされた垂直/水平距離を示します (要素内にスクロール バーが生成されている場合)。それ以外の場合、値は 0 を返します。
ノード.スタイル.左/上
これは、要素のインライン スタイル style で定義された left/top 属性値のみを取得できます。要素が style 属性を定義していない場合、戻り値は空の文字列です。
node.getBoundingClientRect()
left、right、top、bottom の 4 つのプロパティを含むオブジェクトを返します。これらのプロパティは、ブラウザ ウィンドウ (ビューポート) の左上隅を基準とした要素の左上隅と右下隅の間の距離にそれぞれ対応します。