元素大小

1、偏移量  

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

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

元素大小

2、客户区大小

客户区大小指的是元素内容及其内边距占据的空间大小,包括clientWidth和clientHeight属性

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

        }

    }

}

元素大小

 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

  

元素大小

 

你可能感兴趣的:(大小)