JavaScript高级程序设计之元素大小



1、偏移量

// 元素相对于文档的偏移量
var getOffSet = function (ele) {

    var actualLeft = ele.offsetLeft,  // 相对于offsetParent元素的左位移
        actualTop = ele.offsetTop,
        current = ele.offsetParent;   // offsetParent元素

    // 循环到根元素，累加的就是相对于文档的偏移量
    while (current !== null) {
        actualLeft += current.offsetLeft;
        actualTop += current.offsetTop;

        current = current.offsetParent;
    }

    return {
        left: actualLeft,
        top: actualTop
    };
};

2、元素本身大小（border + padding + content）

// 浏览器表现较为一致，只读属性
ele.clientWidth

// 浏览器表现较为一致，只读属性
ele.clientHeight

 

3、滚动大小

// scrollWidth：在没有滚动条的情况下，元素的的总宽度。
// scrollHeight：在没有滚动条的情况下，元素的总高度。
// scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
// scrollTop： 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

// 但是文档的大小在各浏览器中差异较大，统一返回最大值：至少是窗口的大小
var getDocSize = function () {
    var width, height;

    if (document.compatMode === "CSS1Compat") {
        width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
        height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
    } else {
        width = Math.max(document.body.scrollWidth, document.body.clientWidth);
        height = Math.max(document.body.scrollHeight, document.body.clientHeight);
    }

    return {
        width: width,
        height: height
    };
};