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

    };

};