offsetWidth、clientWidth和scrollWidth

1.偏移量

相对于父元素的偏移

offsetHeight
offsetWeight=content+padding2+border2
offsetLeft
offsetTop

Paste_Image.png

2.客户区大小

clientWidth = content + padding*2
clientHeight

Paste_Image.png

function getViewport(){
    if(document.compatMode == "backCompat") {
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    }else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

/*document.compatMode:判断当前浏览器采用的渲染方式
 * BackCompat：标准兼容模式关闭。
*CSS1Compat：标准兼容模式开启。
* 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
* 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
*/

3.滚动大小

scrollHeight
scrollWidth
scrollLeft
scrollTop

Paste_Image.png

由于浏览器对此定义不同，为确定文档总高度，必须取scrollWidth/clientWidth的最大值
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

function scrollToTop(element) {
    if(element.scrollTop !=0) {
        element.scrollTop=0;
    }
}

4.确定元素大小

确定元素在页面中相对视口的位置，可采用下面这个跨浏览器的函数。

function getBoundingClientRect(element) {
    
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
    
    if(element.getBoundingClientRect) {
        //检查属性是否有定义，没有就定义一个
        if(typeof arguments.callee.offset != "number") {
            //创建临时元素temp，坐标位置(0,0)
            var temp = document.createElement("div");
            temp.style.cssText = "position: absolute;left: 0; top: 0;";
            document.body.appendChild(temp);
            //调用getBoundingClientRect(),减去scrollTop,防止窗口已经滚动过
            arguments.callee.offset = -temp.getBoundingCilentRect().top - scrollTop;
            
            document.body.removeChild(temp);
            temp = null;
        }
        var rect = element.getBoundingClientRect();
        var offset = arguments.callee.offset;
        //返回各个顶点坐标
        return {
            left: rect.left + offset,
            right: rect.right + offset,
            top: rect.top + offset,
            bottom: rect.botom + offset
        };
    } else {
        
        var actualLeft = getElementLeft(element) ;
        var actualTop = getElementTop(element);
        
        return {
            left: actualLeft - scrollLeft,
            right: actualLeft + element.offsetWidth - scrollLeft,
            top: actualTop - scrollTop,
            bottom: actualTop +element.offsetHeight - scrollTop
        }
    }
    
}

5.不同浏览器

这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

6.JavaScript窗口属性：

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth