javascript中获取元素尺寸

1. 浏览器的各种尺寸

Javascript获取获取屏幕、浏览器窗口 ，浏览器，网页高度、宽度的大小

屏幕可用工作区宽度：window.screen.availHeight，和浏览器无关，屏幕相关
屏幕可用工作区高度：window.screen.availWidth，和浏览器无关，屏幕相关

网页可见区域宽：document.body.clientWidth ，html中body可视区域的宽clientWidth = width+padding，不包括滚动条，缩放后跟着变
网页可见区域高：document.body.clientHeight ，html中body可视区域的高clientHeight = height+padding，不包括滚动条，缩放的时候跟着变

网页可见区域宽：document.body.offsetWidth ,html中body的宽(包括边线的宽offsetWidth = width + border + padding或者offsetWidth=clientWidth+border) 
网页可见区域高：document.body.offsetHeight ，html中body的高(包括边线的宽offsetHeight  = width + border + padding或者offsetHeight=clientHeight+border)

网页正文全文宽：document.body.scrollWidth ，html中body的实际宽度，即对象的宽度加上可滚动宽度
网页正文全文高：document.body.scrollHeight，html中body的实际高度，即对象的高度加上可滚动高度

网页被卷去的高：document.body.scrollTop， html中body向下滚动过的距离
网页被卷去的左：document.body.scrollLeft ，html中body向右滚动过的距离

网页正文部分上：window.screenTop ，浏览器窗口的左上角在屏幕上的x坐标，只读属性
网页正文部分左：window.screenLeft ，浏览器窗口的左上角在屏幕上的y坐标，只读属性

屏幕分辨率的高：window.screen.height，屏幕的高，浏览器无关，屏幕相关
屏幕分辨率的宽：window.screen.width，屏幕的宽，浏览器无关，屏幕相关

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight：表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
scrollWidth：表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分
注：(1).没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等
       (2).存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等
       (3).存在滚动条，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性

scrollLeft：表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度
scrollTop：表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素高度

offsetHeight：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft：获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop：获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX：相对文档的水平座标
event.clientY：相对文档的垂直座标
event.offsetX：相对容器的水平坐标
event.offsetY：相对容器的垂直坐标
document.documentElement.scrollTop：垂直方向滚动的值
event.clientX+document.documentElement.scrollTop：相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

div.style.top：相对于div所在的元件的顶部距离

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

浏览器大小调整事件
window.onresize = funName;//当浏览器大小发生变化时调用funName函数

getBoundingClientRect()这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0，IE为2
document.documentElement.clientLeft; // 非IE为0，IE为2

function GetRect (element) {
　　var rect = element.getBoundingClientRect();
　　var top = document.documentElement.clientTop;
　　var left= document.documentElement.clientLeft;
　　return{
　　　　top : rect.top - top,
　　　　bottom : rect.bottom - top,
　　　　left : rect.left - left,
　　　　right : rect.right - left
　　}
}

分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。

2. 判断滚动条滚动到最底部

web开发中常见的场景，判断页面是否滚动到最底部，需要用到DOM的三个属性值，scrollTop，clientHeight，scrollHeight。scrollTop是滚动条在Y轴上滚动的距离，clientHeight是DOM可视区域的高度，scrollHeight是内容可视区域的高度加上溢出（滚动）的距离。只要这三个属性值满足scollTop+clientHeight==srollHeight就可以认为已经滚动到底部。代码如下：

//滚动条在Y轴上的滚动距离 
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}
 
//文档的总高度 
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}
 
//浏览器视口的高度 
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}
 
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("已经到最底部了！!");
　　}
}; 

如果使用jquery那就更简单了：

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("已经到最底部了！");
　　}
}); 

如果判断一个DOM元素是否滚动到底部，是类似的，将document.body换成特定的元素就可以了，获取scrollTop和scrollHeight的方式是一样的，但是获取可见高度的时候需要用到offSetHeight属性，修改一下就可以了。代码如下：

// 滚动条在Y轴上的滚动距离
function getScrollTop(id) {
    let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    bodyScrollTop = id ? document.getElementById(id).scrollTop : document.body.scrollTop;
    documentScrollTop = document.documentElement ? document.documentElement.scrollTop : 0;
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
}

//文档的总高度
function getScrollHeight(id) {
    let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    bodyScrollHeight = id ? document.getElementById(id).scrollHeight : document.body.scrollHeight;
    documentScrollHeight = document.documentElement ? document.documentElement.scrollHeight : 0;
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
}

//获取元素视口的高度
function getWindowHeight(id) {
    let windowHeight = 0;
    if(id) {
        windowHeight = document.getElementById(id).offsetHeight;
    } else {
        if (document.compatMode === "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
    }
    return windowHeight;
}

window.document.getElementById("class_goods").onscroll = () => {
    if(getScrollTop("class_goods") + getWindowHeight("class_goods") === getScrollHeight("class_goods")){
        this.page.pageIndex = this.page.pageIndex + 1
        this.getProduct()
    }
}