要素の位置情報
HTMLの各要素の位置情報は各要素のプロパティから取得できます。
CSSOM Viewで定義されているプロパティ・
Elementのインターフェース
attribute long scrollTop;
attribute long scrollLeft;
readonly attribute long scrollWidth;
readonly attribute long scrollHeight;
readonly attribute long clientTop;
readonly attribute long clientLeft;
readonly attribute long clientWidth;
readonly attribute long clientHeight;
ClientRectList getClientRects();
ClientRect getBoundingClientRect();
scrollTop・
標準のモードでは,
ただし,
また,
この部分はCSSOM Viewにおいて最も厄介なところです。まとめると,
スクロール量の取得
var root = 'BackCompat' === document.compatMode ?
document.body : document.documentElement;
var scrollY = window.pageYOffset || root.scrollTop;
IE 6~8以外は常にwindow.
scrollWidth・
clientWidth・
clientTop・
getClientRects・
ClientRectはtop, right, bottom, left, width, heightといったプロパティを持ち,
また,
HTMLElementはDOM Level 2 HTMLやHTML5などで定義されています。
HTMLElementのインターフェース
readonly attribute Element offsetParent;
readonly attribute long offsetTop;
readonly attribute long offsetLeft;
readonly attribute long offsetWidth;
readonly attribute long offsetHeight;
まず,
offsetTop・
offsetWidth・
マウスの位置情報
マウスの位置情報はマウスに関するイベント
MouseEventのインターフェース
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long pageX;
readonly attribute long pageY;
readonly attribute long clientX;
readonly attribute long clientY;
readonly attribute long x;
readonly attribute long y;
readonly attribute long offsetX;
readonly attribute long offsetY;
screenX・
pageX・
clientX・
offsetX・
なお,
IEでのpageY
var root = 'BackCompat' === document.compatMode ?
document.body : document.documentElement;
var pageY = event.clientY || root.scrollTop;
まとめ
今回はCSSOM ViewからDOMの位置の扱い方を学びました。次回は今回学んだ内容を実際に使用する実例を中心に扱いたいと思います。