元素大小

1、偏移量  

偏移量包括元素在屏幕上占用的所有可见的空间,元素的可见大小由其高度和宽度决定。包括所有的内边距、滚动条和边框大小(不包括外边距)。 包括:offsetWidth(元素的宽度、垂直滚动条的宽度、左右边框的高度)、offsetHeight(元素的高度、水平滚动条的宽度、上下边框的宽度)、offsetLeft(元素的左外边框至包含元素的左内边框之间的距离)、offsetTop(元素的上外边框至包含元素的上内边框之间的距离) 注意:offsetLeft和offsetTop属性与包含的元素有关,对于包含元素的引用保存在offsetParent属性中,它不一定与parentNode的值相等。例如<td>的offsetParent是做为其祖先元素的<table>

要获取元素在页面中的偏移量,就通过这个元素的offsetPatent属性,一值循环到根元素,就可以得到一个基本准确的值。

2、客户区大小

客户区大小指的是元素内容及其内边距占据的空间大小,包括clientWidth和clientHeight属性
function getViewport(){
    if(document.compatMode == "BackCompat"){
        return {
            document.body.clientWidth,
            height:document.body.clientHeight
        }
    }else{
        return {
            document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
    }
}

 3、滚动条大小

滚动大小:指的是包含滚动内容的元素的大小,包括:
scrollHeight :在没有滚动条情况下,元素内容的总高度。
scrollWidth : 在没有滚动条的情况下,元素内容的总宽度。
scrollLeft : 被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素在水平方向上滚动位置。
scrollTop : 被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素在垂直方向上滚动位置。

 在确定文档的总高度时,通过以下方法

var docHeight = Math.max(document.documentElement.scroolHeight,document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scroolWidth,document.documentElement.clientWidth);


当运行在ie的混杂模式下时,使用document.body

  

 

原文地址:https://www.cnblogs.com/sandianbaozi/p/2794405.html