JS 获取窗口大小、位置

by sofish

at 2010-12-26 16:45:07

original http://sofish.de/1585

轻松的周末。觉得应该做点什么。写个 Demo ，说说怎么利用 JS 来获取浏览器窗口大小和位置吧。这篇文章，我们想要达成的主要目标是，创建一个页面，这个页面中有一个浮动框，这个浮动框需要有下面几个特性：

不影响浏览布局
水平、垂直方向居中
自适应高度，没有滚动条
获取浮动框的位置
获取浮动框的宽高

一、获取窗口大小

对于窗口的大小，通常需要两对值来获得，分别是 clientWidth, clientHeight 和 offsetWidth, offsetHeight，功能如下表：

属性	描述
clientWidth, clientHeight	获取窗口/元素的可视区域大小，不包含滚动条和边框
offsetWidth, offsetHeight	同样是获取窗口/元素的大小，这个属性的大小包括边框和滚动条

二、获取位置

像在《JS 获取鼠标位置》中提到的，获取位置是比较麻烦的事。因为其存在兼容问题。虽然大家都有一个 offsetLeft 和 offsetTop 来获得相应的位置，但它们的参照物不同，对于 IE 来说，他相对于 parentNode，对于其他浏览器来说，它相对于某个 position 不等于 static 的祖先节点。

不过，幸运的是所有浏览器都有一个 offsetParent 来指向它的参照物。那们，我们就可以轻松地获取到元素相对于其参考物的位置。写一个循环，直接其指向浏览器窗口的边缘。我们可以这样写（来自PPK 老师）：

function getPos() {
    var curLeft =0, curTop = 0;
    if (obj.offsetParent) {
        while (obj.offsetParent) {
            curLeft += obj.offsetLeft;
            curTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
    }
    return [curTop, curLeft];
};

三、DEMO / 源码

话说，写到这也应该都搞清楚这些获取的方法了吧。再回想一下我们的目标。动手，写一个 DEMO 吧。我把 JS 源代码放在下面，先瞄瞄。再看看目标有没有达成，完成的DEMO 看这里：

DEMO：JS获取视窗大小、位置示例

    var $ = function(id) {
            return document.getElementById(id);
        },

        // 触点
        html = document.documentElement,
        box = $('cnt'),
        posX = $('left'),
        posY = $('top'),
        width = $('width'),
        height = $('height'),

        // 浮动框大小
        boxWidth = box.offsetWidth,
        boxHeight = box.offsetHeight,

        // 设置位置
        setPos = function() {

                // 可视窗口
            var htmlWidth = html.clientWidth,
                htmlHeight = html.clientHeight,

                // margin 值
                marginX = htmlWidth > boxWidth ? -(boxWidth/2) : 0,
                marginY = htmlHeight > boxHeight ? -(boxHeight/2) : 0,

                // 可视宽度如果太小，要注意让内容能完整显示出来
                left = marginX == 0 ? 0 : '50%',
                top = marginY == 0 ? 0 : '50%';

                box.style.left = left;
                box.style.top = top;
                box.style.marginLeft = marginX + 'px';
                box.style.marginTop = marginY + 'px';
        },

        // 找到位置
        getPos = function() {
            var curLeft =0, curTop = 0, obj = box;
            if (obj.offsetParent) {
                while (obj.offsetParent) {
                    curLeft += box.offsetLeft;
                    curTop += box.offsetTop;
                    obj = obj.offsetParent;
                }
            }
            posX.innerHTML = curLeft;
            posY.innerHTML = curTop;
        };

        width.innerHTML = boxWidth;
        height.innerHTML = boxHeight;

        setPos();
        getPos();

        // 用户放大/缩小窗口，浮动应做相应处理
        window.onresize = function(){
            setPos();
            getPos();
        }

好吧，结束这篇文章。想想，写写 DEMO，生活更美好。撒花。再去做点别的事好了。有问题的，提吧提吧。

Google Reader