Dimension API
Javascript 2012. 4. 18. 13:58
Dimension API
이전 포스트에서 자바스크립트를 통해 DOM Dimension 수치를 가져오는 방법에 대해 설명하였습니다.
아래는 그와 관련된 함수들을 모듈화한 소스 코드입니다.
-
var Dimension = (function(win, doc){
-
-
return new (function(){
-
-
function init(){
-
-
return this;
-
};
-
-
init.prototype =
-
{
-
screen: _screen,
-
doc: doc,
-
scroll: scroll,
-
mouse: mouse,
-
elem: elem
-
};
-
-
-
return init;
-
-
}());
-
-
-
function _screen(){
-
-
return {
-
w: screen.width,
-
h: screen.height
-
};
-
};
-
-
function doc()
-
{
-
var page = {
-
-
w: top.window.scrollMaxX ? top.window.innerWidth + top.window.scrollMaxX : top.document.documentElement.scrollWidth || top.document.body.scrollWidth || 0,
-
h: top.window.scrollMaxY ? top.window.innerHeight + top.window.scrollMaxY : top.document.documentElement.scrollHeight || top.document.body.scrollHeight || 0
-
}
-
-
, win = {
-
-
w: top.window.innerWidth ? top.window.innerWidth : top.document.documentElement.clientWidth || top.document.body.clientWidth || 0,
-
h: top.window.innerHeight ? top.window.innerHeight : top.document.documentElement.clientHeight || top.document.body.clientHeight || 0
-
};
-
-
return {
-
page: page,
-
win: win
-
};
-
};
-
-
function scroll(){
-
-
return {
-
x: top.window.scrollX || top.window.pageXOffset || top.document.documentElement.scrollLeft || top.document.body.scrollLeft || 0,
-
y: top.window.scrollY || top.window.pageYOffset || top.document.documentElement.scrollTop || top.document.body.scrollTop || 0
-
};
-
};
-
-
function elem(elem){
-
-
elem = elem || top.document.documentElement;
-
-
var round = Math.round
-
, pFloat = parseFloat
-
, w = round(pFloat(Element.css(elem, 'width'))) || 0
-
, h = round(pFloat(Element.css(elem, 'height'))) || 0
-
, x = round(pFloat(getElementX(elem))) || 0
-
, y = round(pFloat(getElementY(elem))) || 0
-
, r = x + w || 0
-
, rx = round(pFloat(getParentRelativeX(elem))) || 0
-
, ry = round(pFloat(getParentRelativeY(elem))) || 0;
-
-
-
return {
-
w: w,
-
h: h,
-
x: x,
-
y: y,
-
r: r,
-
rx: rx,
-
ry: ry
-
};
-
}
-
-
-
function getElementX(elem){
-
-
elem = elem || top.document.documentElement;
-
var x = 0;
-
-
while (elem.offsetParent){
-
-
x += elem.offsetLeft;
-
-
elem = elem.offsetParent;
-
};
-
-
return x;
-
};
-
-
function getElementY(elem){
-
-
elem = elem || top.document.documentElement;
-
var y = 0;
-
-
while (elem.offsetParent){
-
-
y += elem.offsetTop;
-
-
elem = elem.offsetParent;
-
}
-
-
return y;
-
};
-
-
// 해당 엘리먼트와 직속 부모 엘리먼의 상대적인 X 위치
-
function getParentRelativeX(elem){
-
-
elem = elem || top.document.documentElement;
-
-
return elem.parentNode === elem.offsetParent ? elem.offsetLeft :
-
-
(getElementX(elem) - getElementX(elem.parentNode));
-
};
-
-
-
// 해당 엘리먼트와 직속 부모 엘리먼의 상대적인 Y 위치
-
function getParentRelativeY(elem){
-
-
elem = elem || top.document.documentElement;
-
-
return elem.parentNode === elem.offsetParent ? elem.offsetTop :
-
-
(getElementY(elem) - getElementY(elem.parentNode));
-
};
-
-
-
-
function mouse(e){
-
-
e = top.window.event || e;
-
-
var scroll = this.scroll();
-
-
// x, y: 현재 마우스 위치
-
// rx, ry: 이벤트가 발생한 해당 엘리먼트와 마우스의 상대적인 x, y 위치
-
var x = e.pageX || e.clientX + scroll.x || 0
-
, y = e.pageY || e.clientY + scroll.y || 0
-
, rx = e.layerX || e.offsetX || 0
-
, ry = e.layerY || e.offsetY || 0;
-
-
-
return {
-
x: x,
-
y: y,
-
rx: rx,
-
ry: ry
-
};
-
};
-
-
-
-
-
}(window, document));