各种宽高

Posted 2020-08-05

1.显示器的分辨率

     window.screen.width-----显示器的宽度 单位是p x

     window.screen.height-----显示器的高度 单位是px

      window.screen.availWidth-----显示器的可用宽度 是指浏览器窗口最大后,浏览器能撑开的宽度(滚动条也是浏览器的一部分)，

                                               其中任务栏不包括在内，即使将任务栏设置为自动隐藏

       window.screen.availHeight-----显示器的可用高度 是指浏览器窗口最大后,浏览器能撑开的高度(滚动条也是浏览器的一部分)，

   　　　　　　　　　　　　　　   其中任务栏不包括在内，即使将任务栏设置为自动隐藏

 

2.窗口的文档显示区

     window.innerWidth-----窗口的当前宽度，其中包括滚动条  可以认为是窗口的可见宽度+滚动条 滚动条的宽高一般为17px

     window.innerHeight-----窗口的当前高度，其中包括滚动条 可以认为是窗口的可见高度+滚动条 滚动条的宽高一般为17px

     IE 8(包括)以下不兼容

 

 

3.窗口的可视区域

     IE 7(包括)以上:

          document.documentElement.clientWidth-----窗口的可视区域宽度，不包括滚动条

          document.documentElement.clientHeight-----窗口的可视区域高度，不包括滚动条

     IE 7(不包括)以下

          document.body.clientWidth-----body的内容区宽度，不包括滚动条,不包括边框，不包括margin,但是包括padding

          document.body.clientHeight-----body的内容区高度 ，不包括滚动条,不包括边框，不包括margin,但是包括padding

     document.body以前是IE的私有属性，在IE7出现以前，用来获取可视区域大小的，后来各种浏览器也都开始支持该属性，但是还是存在问题的，比如 

document.body是body元素，document.documentElement是html元素，在窗口缩小时，document.body.clientHeight一直都是body的真正宽度1104，而document.documentElement则能得到可视窗口的宽度。

这种bug在IE 7(包括)以上浏览器以及其他浏览器都存在

 

 

4.offsetWidth和offsetHeight元素自身宽高

     document.documentElement.offsetWidth-----窗口(html)的自身宽度，不包括滚动条，不包括margin,但是包括padding,包括border

     document.documentElement.offsetHeight-----窗口(html)的自身高度，不包括滚动条，不包括margin,但是包括padding,包括border

     document.body.offsetWidth-----body的contentWidth+padding+border

     document.body.offsetHeight-----body的contentHeight+padding+border;

可以理解为该元素边框包围的范围(包括边框)

 

 

5.页面的真正宽高

      有时候元素的内容比元素本身宽，比本身高，scrollWidth&&scrollHeight是得到元素的实际宽高

     document.documentElement.scrollWidth-----html的contentWidth+margin+border+padding

     document.documentElement.scrollHeight-----html的contentHeight+margin+border+padding

 

 

6.offsetTop

     本身外边框到父元素内边框的距离，各个浏览器计算方式差异很大

元素定位时，主要看元素的边框在哪里，边框的位置除了和定位的top,left等有关，还和margin有关

offsetTop是往上寻找祖先元素，第一个不是static定位的祖先元素就是该元素的offsetParent，offsetTop是本身元素的border到祖先元素的border距离。如果一直没有非static定位，则最后offsetParent是body元素

 

 

7.clientTop和clientLeft

     clientTop-----border-top的值

     clientLeft-----border-left的值

     兼容性不行

 

8.scollTop和scrollLeft

     scrollTop-----页面往上滚动的距离

     scrollLeft-----页面往左滚动的距离

不应该使用document.documentElement.scrollTop，应该使用document.body.scrollTop代替

 

9.window.pageYOffset和window.pageXOffset

     页面相对于窗口左上角的X和Y位置