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
    };
};