【JavaScript】getClientRectsとgetBundingClientRectの使い方、違い
「getClientRectsとgetBundingClientRectの使い方、違い」で検索したら日本語記事がなかったので下の参考をざっくり翻訳して書こうと思いました。
getClientRects
戻り値 : ClientRectList
このような要素を取得した場合、
ClientRectListの中身
0: ClientRect,←この中身は下で説明
length: 1,
item: item()
}
getBundingClientRect
戻り値 : ClientRect
中身
bottom:
height:
left:
top:
width:
}
を持ちます。
ClientRectて？？
前出のgetBundingClientRectで返されるListのインデックス0のオブジェクト。
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect
・属性にbottom, height, left, right, top, width等を持つオブジェクト
ここの属性にアクセスしてveiwportをrelativeとした要素領域情報(rectangle boxの幅や高さ)を取得できる
・ここでの位置情報はスクロールされると変わる
・値は読み込み専用
※呼び方が変わる、ClientRectだったり、DOMRectだったり、TextRectangleだったり
・ブラウザ互換性は chrome 1.0 Firefox:3.0 IE 4 Opera 4 Safari 4
何が嬉しいか。
var fafa = document.getElementById('fafa')
fafa.offsetLeft
fafa.offsetTop;
fafa.offsetWidth;
fafa.offsetHeight
などのオブジェクトと併せて使うことで威力を発揮する
実際使ってみる
※jsfiddleにこちらhttps://getfirebug.com/firebug-lite-debug.jsをExternalResourcesとして追加するとデバッグできる。consoleとかみながらできる
https://jsfiddle.net/kenjimorita/mm9uosog/
参考
https://stackoverflow.com/questions/18780139/how-to-get-bounding-box-for-div-element-in-jquery
https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
https://msdn.microsoft.com/en-us/library/ms536435(VS.85).aspx
https://msdn.microsoft.com/en-us/library/ms536433(v=vs.85).aspx