フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集261問(脱初心者へ)2016/09/10更新

【JavaScript】getClientRectsとgetBundingClientRectの使い方、違い

【JavaScript】getClientRectsとgetBundingClientRectの使い方、違い

「getClientRectsとgetBundingClientRectの使い方、違い」で検索したら日本語記事がなかったので下の参考をざっくり翻訳して書こうと思いました。

getClientRects

戻り値 : ClientRectList

var rect = document.getElementById(“myElement”).getClientRects();

このような要素を取得した場合、
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/

他のJavaScript記事

参考
http://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

(Visited 4 times, 1 visits today)