JS中关于宽高的那些事

一、document中相关的宽高

1. clientWidth 与 clientHeight
   若无 padding 和滚动条：
   clientWidth = style.width

   若有 padding 无滚动条：
   clientWidth = style.width+style.padding*2

   若有 padding 有滚动条，且滚动条是显示的：
   clientWidth = style.width+style.padding*2 - 滚动条的宽带

2. clientLeft 与 clientTop
   这一对属性用来读取元素的border的宽度和高度，如果不指定一个边框或不定位这个元素，那他就是0，否则如下：

   clientTop = border-top 的 border-width
   clientLeft = border-left 的 border-width

3. offsetWidth 与 offsetHeight
   这一对属性指的是元素的 border+padding+content 的宽度和高度。它和其内部的内容是否超出元素大小无关，只和本来设定 的 border 以及宽高有关。

   若无 padding 无滚动条无 border：
   offsetWidth = clientWidth = style.width

   若有 padding 无滚动条有 border：
   offsetWidth = style.width + style.padding2 + border宽度2
   offsetWidth = clientWidth + border宽度*2

   若有 padding 有滚动，并且滚动条是显示的，有 border
   offsetWidth = style.width + style.padding2 + border宽度2
   offsetWidth = clientWidth + 滚动条宽度 + border宽度*2

4. offsetLeft与offsetTop
   这两个属性基于其offsetParent：
   （1）如果当前元素的父级元素没有进行 CSS 定位（position为 absolute 或 relative），offsetParent 即为body。
   （2） 如果当前元素的父级元素有进行 CSS 定位（position为 absolute 或 relative），offsetParent 取最近的那个父级元素。

   offsetParent是一个比较坑爹的属性，其在不同的浏览器和浏览器内核上的含义有所区别

5. scrollWidth 和 scrollHeight
   document.body中的 scrollWidth 和 scrollHeight：
   （1）给定的宽高小于浏览器的窗口时，scrollWidth 通常是浏览器窗口的宽度，scrollHeight 通常是浏览器窗口的高度。
   （2）给定的宽高大于浏览器的窗口且内容小于给定宽高时，scrollWidth = 给定的宽度 + 所有的padding、margin、border，
   scrollHeight = 给定高度 + 所有的padding、margin、border
   （3）给定宽高大于浏览器的窗口，且内容大于给定宽高时，scrollWidth = 给定的宽度 + 所有的padding、margin、border、scrollHeight = 给定高度 + 所有的padding、margin、border

   在某div中 scrollWidth 和 scrollHeight：
   无滚动条时：
   scrollWidth = clientWidth = style.width + style.padding2
   有滚动条时：
   scrollWidth = 实际内容的宽度 + padding2
   scrollHeight = 实际内容的高度 + padding*2

6. scrollLeft 与 scrollTop
   这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。

7. obj.style.width 与 obj.style.height
   对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的，style.width是css属性中的宽度，style.height是css属性中的高度。

二、window中相关的宽高

1. innerHeight 和 outerHeight
   outerHeight 指的是整个浏览器的外部高度，其包括菜单栏，工具栏的高度；innerHeight 是浏览器中渲染内容区域的高度。

2. innerWidth 和 outerWidth
   outerWidth 指的是浏览器窗口外部的宽度，它表示整个浏览器窗口的宽度，包括边栏；innerWidth 获取浏览器可视区域的宽度，也就是页面的宽度。

3. window.screen
   window.screen对象包含用户屏幕的信息，其包含 window.screen.height、 window.screen.width、 window.screen.availHeight、 window.screen.availWidth。