javascript获取屏幕、窗口、元素等的大小

javascript获取屏幕、窗口、元素等的大小

一. 屏幕大小

​ 什么是屏幕大小？屏幕大小是指当前所用设备的屏幕的分辨率（浏览器窗口外部显示器的大小），它一般是不变的。它们可以通过javaScript中screen对象的属性获取。

screen.height: 屏幕的像素高度
screen.width： 屏幕的像素宽度

screen.availHeight: 屏幕的可用工作区的像素高度（即屏幕的像素高度减去系统部件高度之后的值） 
screen.availWidth: 屏幕的可用工作区的像素宽度（即屏幕的像素宽度减去系统部件宽度之后的值）

其中height与availHeight的区别，一般对于windows用户来说，availHeight是除去windows任务栏的高度，而height是包括了任务栏的高度，因为任务栏可以在屏幕的上下左右，所以对于width和availWidth是同理的。这四个属性都是只读的。
例子：
screen.height
1080
screen.width
1920
screen.availHeight  （减去底部任务栏的高度）
1040
screen.availWidth
1920

二. 浏览器窗口的大小

​ 对于IE9+、Firefox、Chrome、Safari、Opera浏览器来说在window对象上都提供了四个属性：innerHeight、innerWidth、outerHeight、outerWidth。而IE8及其以下浏览器没有提供这四个属性。对于outerHeight和outerWidth表示浏览器本身尺寸的大小，但是并不是每个浏览器都是这样的，比如在Chrome中outerHeight和innerHeight是一样的，并且在IE8及其以下浏览器根本没有提供获取浏览器窗口大小的属性，所以我们无法统一的得到各个浏览的本身尺寸的大小。但是我们可以获取浏览器中页面可见区域的大小（除去一些边框）。

在IE9+、Firefox、Chrome、Safari、Opera中可以通过innerHeight和innerWidth获取页面可见区域的大小。而对于IE8及其以下浏览器通过DOM提供了页面可见区域大小的信息，document.documentElement.clientHeight和document.documentElement.clientWidth，但如果IE6处于混在模式，需要通过document.body.clientHeight和document.body.clientWidth获取页面可见区域大小。所以跨浏览器获取页面可见区域大小如下：

window.outerHeight  浏览器的高度
window.outerWidth	浏览器的宽度

window.innerHeight  浏览器可见窗口的高度
window.innerWidth   浏览器可见窗口的宽度


兼容低版本浏览器
var pageHeight,
    pageWidth;

if(typeof window.innerHeight != 'undefined') {
	pageHeight = window.innerHeight;
    pageWidth = window.innerWidth;
}else{
    if(document.compatMode == 'CSS1Compat') {
        //判断是否处于混杂模式
        pageHeight = document.documentElement.clientHeight;
        pageWidth = document.documentElement.clientWidth;
    }else{
        pageHeight = document.body.clientHeight;
        pageWidht = document.bodu.clientWidth;
    }
}

​ window.innerHeight与document.documentElement.clientHeight或者window.innerWidth与document.documentElement.clientWidth在页面中没有出现滚动条时是一样的.

当页面中出现了滚动条，window.innerHeight和window.innerWidth包含了滚动条的大小，而document.documentElement.clientHeight和document.documentElement.clientWidth没有包含滚动条的大小。比如：

//在没有滚动条下
alert(window.innerWidth); //1366
alert(document.documentElement.clientWidth);//1366

//页面中有滚动条下
alert(window.innerWidth); //1366
alert(document.documentElement.clientWidth);//1349

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GNGiAXfK-1605667881302)(D:\vue项目\图片\数据结构\浏览器可见窗口.jpg)]

三. 页面中的元素大小

1. 大小

offsetWidth: 元素在水平方向上占用的空间大小，其中包括元素的宽度、左右边框的大小、垂直滚动条的大小、左右内边距；
offsetHeight: 元素在垂直方向上占用的空间大小，其中包括元素的高度、上下边框的大小、水平滚动条的大小、上下内边距

对于滚动条有如下说明：当元素里面的内容的大小超出了元素的width/height大小，并且元素的overflow属性的值为scroll时，那么元素就会出现滚动条。

①首先来说没有滚动条的情况：

offsetWidth=width+border-left-width+border-right-width+padding-left+padding-right;

offsetHeight=height+border-top-width+border-bottom-width+padding-top+padding-bottom;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUFMccjP-1605667881310)(D:\vue项目\图片\数据结构\没有滚动条.png)]

②在有滚动条的情况下(包含了滚动条的大小):　如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WS128jm2-1605667881315)(D:\vue项目\图片\数据结构\有滚动条.jpg)]

2. 偏移量

​ 偏移量是指元素在屏幕上占用的所有可见的空间，元素的可见大小是由元素的高度、宽度、内边距、滚动条、边框决定的（不包括外边距）

offsetLeft：元素的左外边框至包含元素（offsetParent）的左内边框之间的像素距离。

offsetTop：元素的上外边框至包含元素（offsetParent）的右内边框之间的像素距离。

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性的值是距离元素最近的并且已经进行css定位（absolute/relative）的祖先元素。如果祖先元素中没有进行定位的元素，那么offsetParent的值就是根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。offsetParent属性不一定与parentNode的值相等。但是在IE7和IE6中offsetParent的值就是parentNode的值，offsetParent的取值与父级元素是否定位没有关系，它的值始终就是该元素的父元素。比如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsLk65uc-1605667881323)(D:\vue项目\图片\数据结构\对于非67.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19j0sRmr-1605667881325)(D:\vue项目\图片\数据结构\对于67.jpg)]

某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent元素的offsetLeft和offsetTop相加，如此循环直至根元素，就可以得到了。

function getOffset(elem){
    var actualLeft=elem.offsetLeft;
    var actualRight=elem.offsetRight;
    var curr=elem.offsetParent;
    while(curr!==null){
        actualLeft+=curr.offsetLeft;
        actualRight+=curr.offsetRight;
        curr=curr.offsetParent;
    }
    return {
        actualLeft:actualLeft,
        actualRight:actualRight
    };
}

3. 客户区大小

元素客户区大小是指元素内容及其内边距所占据的空间大小。客户区大小的属性有两个：clientWidth和clientHeight.

　　clientWidth：元素内容区宽度加上左右内边距宽度；

　　clientHeight：元素内容区高度加上上下内边距高度；

由于浏览器渲染时会把滚动条的宽度（或高度）算在元素本身的宽度（或高度）中，并且客户区大小不计算滚动条占用空间，所以当元素出现滚动条时，客户区大小是元素内容及其内边距所占据的空间大小减去滚动条的大小。比如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYfzutDl-1605667881327)(D:\vue项目\图片\数据结构\客户区大小1.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LS4zG9jr-1605667881330)(D:\vue项目\图片\数据结构\客户区大小2.jpg)]

4. 滚动条大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZzxLNLr-1605667881332)(C:\Users\luochaodong\AppData\Roaming\Typora\typora-user-images\image-20201113140940676.png)]

滚动大小是指包含滚动内容的元素的大小。滚动大小的属性有四个:scrollWidth、scrollHeight、scrollTop、scrollLeft

scrollWidth：元素完整的宽度即包含元素被隐藏部分的宽度；

scrollHeight：元素完整的高度即包含元素被隐藏部分的高度；

scrollTop：元素被滚动条卷上去的高度；

scrollLeft：元素被滚动条卷上去的宽度；

如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2sej9oJV-1605667881335)(D:\vue项目\图片\数据结构\滚动条.png)]

对于scrollTop和scrollLeft这两个属性，可以通过它们来判断元素滚动条当前的状态，也可以设置滚动位置。