hccbe

要素の位置と大きさ

HTMLの要素の位置と大きさに関するメモ書き。

HTMLElement.style.top、HTMLElement.style.right、HTMLElement.style.bottom、HTMLElement.style.left
HTMLElement.style.width、HTMLElement.style.height

下の表「top、right、bottom、left、width、heightの意味」を図示したもの
top、right、bottom、left、width、heightの概念図
top、right、bottom、left、width、heightの意味
HTMLElement.style.topoffsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）のborder-top下端からこの要素のmargin-top上端までの距離。この際、包含ブロックのpadding-top高は考慮されない。
HTMLElement.style.rightoffsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）の縦スクロールバー左端（縦スクロールバーがない場合はborder-right左端）からこの要素のmargin-right右端までの距離（top、right、bottom、leftでの位置テスト1）。この際、包含ブロックのpadding-right幅は考慮されない。包含ブロックのContent幅がoverflowしている場合、overflowした分の距離は考慮されない（top、right、bottom、leftでの位置テスト2）。
HTMLElement.style.bottomoffsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）の横スクロールバー上端（横スクロールバーがない場合はborder-bottom上端からこの要素のmargin-bottom下端までの距離（top、right、bottom、leftでの位置テスト1）。この際、包含ブロックのpadding-bottom高は考慮されない。包含ブロックのContent高がoverflowしている場合、overflowした分の距離は考慮されない（top、right、bottom、leftでの位置テスト2）。
HTMLElement.style.leftoffsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）のborder-left右端からこの要素のmargin-left左端までの距離。この際、包含ブロックのpadding-left幅は考慮されない。
HTMLElement.style.widthContent幅。負の値は設定できない。
この幅を基にpadding幅を加えてborder枠の幅、さらにborder幅とmargin幅を加えてmargin枠の幅が決定する。その際、CSSのoverflowプロパティでscrollを指定し、縦スクロールバーが表示されていても縦スクロールバー幅は考慮されない。
HTMLElement.style.heightContent高。負の値は設定できない。
この高を基にpadding高を加えてborder枠の高、さらにborder高とmargin高を加えてmargin枠の高が決定する。その際、CSSのoverflowプロパティでscrollを指定し、横スクロールバーが表示されていても横スクロールバー高は考慮されない。

HTMLElement.offsetTop、HTMLElement.offsetLeft
HTMLElement.offsetWidth、HTMLElement.offsetHeight

下の表「offsetTop、offsetLeft、offsetWidth、offsetHeightの意味」を図示したもの
offsetTop、offsetLeft、offsetWidth、offsetHeightの概念図
offsetTop、offsetLeft、offsetWidth、offsetHeightの意味
HTMLElement.offsetTop読み取り専用。
offsetParent属性で得られるCSSのpositionプロパティがrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）のborder-top下端からこの要素のborder-top上端までの距離のピクセル値。
ただし、包含ブロックがdocument.bodyであり、document.bodyのCSSのposition属性がrelative、absolute、fixedのいずれでもない場合、document.bodyのborder高とmargin高がさらに加わった値となる場合（IE、Edge、Chromium）と、document.bodyのmargin高のみがさらに加わった値となる場合（Firefox）がある。包含ブロックがdocument.bodyであり、document.bodyのCSSのposition属性がrelative、absolute、fixedのいずれかである場合、既定の通りとなる場合（IE、Edge、Firefox）と、document.bodyのborder高のみがさらに加わった値となる場合（Chromium）がある。
document.documentElementでは常に0になる。
document.bodyでは常に0になる場合（IE、Edge、Chromium）と、常にborder高のマイナス値となる場合（Firefox）がある。
HTMLElement.offsetLeft読み取り専用。
offsetParentプロパティで得られるCSSのposition属性がrelative、absolute、fixedのいずれかである祖先要素（包含ブロック）のborder-left右端からこの要素のborder-left左端までの距離のピクセル値。
ただし、包含ブロックがdocument.bodyであり、document.bodyのCSSのposition属性がrelative、absolute、fixedのいずれでもない場合、document.bodyのborder幅とmargin幅がさらに加わった値となる場合（IE、Edge、Chromium）と、document.bodyのmargin幅のみがさらに加わった値となる場合（Firefox）がある。包含ブロックがdocument.bodyであり、document.bodyのCSSのposition属性がrelative、absolute、fixedのいずれかである場合、既定の通りとなる場合（IE、Edge、Firefox）と、document.bodyのborder幅のみがさらに加わった値となる場合（Chromium）がある。
document.documentElementでは常に0になる。
document.bodyでは常に0になる場合（IE、Edge、Chromium）と、常にborder幅のマイナス値となる場合（Firefox）がある。
HTMLElement.offsetWidth読み取り専用。
この要素のborder-left左端からこの要素のborder-right右端までの距離のピクセル値。この要素のCSSで指定したwidth（Content幅）、padding幅、border幅の合計幅。
HTMLElement.offsetHeight読み取り専用。
この要素のborder-top上端からこの要素のborder-bottom下端までの距離のピクセル値。この要素のCSSで指定したheight（Content高）、padding高、border高の合計高。

Element.clientTop、Element.clientLeft
Element.clientWidth、Element.clientHeight

下の表「clientTop、clientLeft、clientWidth、clientHeightの意味」を図示したもの
clientTop、clientLeft、clientWidth、clientHeightの概念図
clientTop、clientLeft、clientWidth、clientHeightの意味
Element.clientTop読み取り専用。
この要素のborder-top高のピクセル値。
Element.clientLeft読み取り専用。
この要素のborder-left幅と文字方向が右から左となっている場合に左側に縦スクロールバーが表示されたときの縦スクロールバー幅の合計幅のピクセル値。
Element.clientWidth読み取り専用。
この要素のCSSで指定したwidth、padding幅の合計幅から縦スクロールバー幅（表示されている場合）を除いた幅のピクセル値（clientTop、clientLeft、clientWidth、clientHeightのテスト1）。
Element.clientHeight読み取り専用。
この要素のCSSで指定したheight、padding高の合計高から横スクロールバー高（表示されている場合）を除いた高のピクセル値（clientTop、clientLeft、clientWidth、clientHeightのテスト1）。

Element.scrollTop、Element.scrollLeft
Element.scrollWidth、Element.scrollHeight

下の表「scrollTop、scrollLeft、scrollWidth、scrollHeightの意味」を図示したもの
scrollTop、scrollLeft、scrollWidth、scrollHeightの概念図
（content edgeがpadding edgeからはみ出している場合）
scrollTop、scrollLeft、scrollWidth、scrollHeightの意味
Element.scrollTopこの要素内で垂直方向にスクロールしたpadding-top上端からの距離のピクセル値。値を設定すると、その値の距離まで縦方向にスクロールする。
Element.scrollLeftこの要素内で水平方向にスクロールしたpadding-left左端からの距離のピクセル値。値を設定すると、その値の距離まで横方向にスクロールする。
Element.scrollWidth読み取り専用。
この要素のContent幅、padding幅の合計幅のピクセル値。CSSのwidthプロパティで設定したContent幅からcontentがはみ出している場合、padding-left幅と拡大したcontent幅の合計幅がclientWidthより小さければ、clientWidthと同じ値になる。padding-left幅と拡大したcontent幅の合計幅がclientWidthより大きければ、そのpadding-left幅と拡大したcontent幅の合計幅となる（scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト1、scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト2、scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト3）。
Element.scrollHeight読み取り専用。
この要素のContent高、padding高の合計高のピクセル値。CSSのheightプロパティで設定したContent高からcontentがはみ出している場合、padding-top高と拡大したcontent高の合計高がclientHeightより小さければ、clientHeightと同じ値になる。padding-top高と拡大したcontent高の合計高がclientHeightより大きければ、そのpadding-top高と拡大したcontent高の合計高となる（scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト1、scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト2、scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト3）。

Element.getBoundingClientRect()

下の表「DOMRectオブジェクトの各属性値の意味」を図示したもの
getBoundingClientRect()の概念図

引数なし。実行するとDOMRectオブジェクトが返る。DOMRectオブジェクトには実行時点でのWeb Browserの表示領域左上を基点とした表示上の位置情報が格納されている。

DOMRectオブジェクトの各属性値の意味
DOMRect.xWebブラウザーの表示領域の上端からこの要素のborder-top上端までの表示上の距離のピクセル値。DOMRect.leftと同じ値になる。
ただし、undefinedとなる場合（Edge、IE、Chromium）もある（getBoundingClientRect()での位置テスト1）。
DOMRect.yWebブラウザーの表示領域の左端からこの要素のborder-left左端までの表示上の距離のピクセル値。DOMRect.topと同じ値になる。
ただし、undefinedとなる場合（Edge、IE、Chromium）もある（getBoundingClientRect()での位置テスト1）。
DOMRect.widthこの要素のborder-left左端からborder-right右端までの表示上の距離のピクセル値。DOMRect.rightからDOMRect.leftを引いた値になる。
DOMRect.heightこの要素のborder-top上端からborder-bottom下端までの表示上の距離のピクセル値。DOMRect.bottomからDOMRect.topを引いた値になる。
DOMRect.topWebブラウザーの表示領域の上端からこの要素のborder-top上端までの表示上の距離のピクセル値。DOMRect.yと同じ値になる。
DOMRect.rightWebブラウザーの表示領域の左端からこの要素のborder-right右端までの表示上の距離のピクセル値。
DOMRect.bottomWebブラウザーの表示領域の上端からこの要素のborder-bottom下端までの表示上の距離のピクセル値。
DOMRect.leftWebブラウザーの表示領域の左端からこの要素のborder-left左端までの表示上の距離のピクセル値。DOMRect.xと同じ値になる