js各种宽高意义总结

Posted 2020-11-24 yxknotes

1、window的各种宽高   outerWidth、innerWidth、outerHeight、innerHeight

1. outerHeight 获取浏览器窗口外部的高度（单位：像素）。表示整个浏览器窗口的高度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调整窗口大小的边框（window resizing borders/handles）
2. innerHeight 浏览器视口的高度（单位：像素），如果存在水平滚动条则包括它
3. outerWidth 获取浏览器窗口外部的宽度（单位：像素）。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调整窗口大小的边框（window resizing borders/handles）
4. innerWidth 浏览器视口的宽度（单位：像素），如果存在垂直滚动条则包括它

　------以上四个属性仅适用于 IE9+，对于老IE 则需注意两点：

• IE8及以下不支持 outerWidth 和 outerHeight，且没有提供替代的属性
• 针对 innerWidth 和 innerHeight，可以用过 document.documentElement.clientWidth/Height (标准模式) 和 document.body.clientWidth/Height (混杂模式) 替代

　------以下两组属性，声明了窗口的左上角在屏幕上的 x 坐标 和 y 坐标，都不存在兼容性问题

• screenLeft /  screenTop  适用于 IE、Safari 和 Opera
• screenX / screenY          适用于 Firefox 和 Safari

2、window.screen 对象表示一个屏幕，包含用户屏幕的信息

　　screen对象共包含6个宽高属性 width、height、availWidth、availHeight、availTop、availLeft

1. width      返回显示器屏幕的宽度（单位：像素）
2. height     返回显示器屏幕的高度（单位：像素）
3. availWidth   返回显示屏幕的可用宽度，除 windows 任务栏之外（单位：像素）
4. availHeight  返回显示屏幕的可用高度，除 windows 任务栏之外（单位：像素）

3、document 相关的宽高

1. 　clientWidth  属性表示元素的内部宽度（单位：像素）。包括内边距，但不包括垂直滚动条（如果有），边框和外边距可以通过 css width + css padding - 垂直滚动条宽度（如果有）来计算
2. 　clientHeight 属性是只读的，对于没有定义css或者内联布局盒子的元素为0，否则，它是元素内部的高度（单位：像素）。包括内边距，但不包括水平滚动条（如果有），边框和外边距
3. 　clientTop  一个元素顶部边框的宽度（单位：像素），不包括顶部外边距或内边距
4. 　clinetLeft 一个元素左边框的宽度（单位：像素），不包括左内边距和左外边距
5. 　offsetWidth   返回一个元素的布局宽度。包括 元素的边框（border）+ 水平线上的内边距（padding）+ 垂直方向滚动条宽度（scrollbar）+ css 设置的宽度（width）
6. 　offsetHeight  返回一个元素的像素高度。包括 元素的边框（border）+ 垂直线上的内边距（padding）+ 水平方向滚动条高度（scrollbar）+ css 设置的高度（height），不包括 :before, :after 等伪元素的宽高
7. 　offsetTop  返回当前元素相对于其 offsetParent 元素的顶部的距离------> (当前元素的祖先元素没有定位，offsetParent 最终是body ------当前元素的祖先元素定位了，offsetParent 取最近的那个祖先元素)
8. 　offsetLeft  返回当前元素左上角相对于其 offsetParent 元素的左边界偏移的距离
9.     scrollWidth 返回元素的内容区域宽度 或 元素的本身的宽度中 更大的那个值。若元素的宽度大于其内容区域（如：存在滚动条时），scrollWidth 要大于 clientWidth
10. 　scrollHeight 等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度；若没有垂直滚动条，scrollHeight 与 clientHeight 相同
11. 　scrollLeft  可以读取或设置元素滚动条到元素左边的距离------> (如果元素不能滚动（如：没有溢出），那么 scrollLeft 的值是0) (如果给 scrollLeft 设置的值小于 0，那么 scrollLeft 的值将变为0) ( 如果给 scrollLeft 设置的值小于元素内容最大的宽度，那么 scrollLeft 的值将被设为元素的最大宽度)
12. 　scrollTop 可以获取或设置一个元素的内容垂直滚动的像素数------> ( 如果元素没有垂直方向的滚动条，那么 scrollTop 的值是0) (如果 scrollTop 设置的值小于0， 那么 scrollTop的值将变为0) ( 如果设置超出了这个容器可滚动的值，scrollTop 会被设置为最大值)

4、Event 事件对象的坐标

1. clientX和clientY ----> 相对于浏览器（可视区左上角0,0）的坐标
2. screenX和screenY ----> 相对于设备屏幕左上角的（0,0）的坐标
3. offsetX和offsetY ----> 相对于事件源左上角(0,0)的坐标
4. pageX和pageY 相对于整个网页左上角(0,0)的坐标
5. X和Y 本是IE属性，相对于用CSS动态定位的最内容包裹元素