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