要素の位置と大きさ

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

HTMLElement.style.topHTMLElement.style.rightHTMLElement.style.bottomHTMLElement.style.left
HTMLElement.style.widthHTMLElement.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.offsetTopHTMLElement.offsetLeft
HTMLElement.offsetWidthHTMLElement.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.clientTopElement.clientLeft
Element.clientWidthElement.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.scrollTopElement.scrollLeft
Element.scrollWidthElement.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のテスト1scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト2scrollTop、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のテスト1scrollTop、scrollLeft、scrollWidth、scrollHeightのテスト2scrollTop、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と同じ値になる