摘要：如果块级元素没有设置高度，则返回实际高度。如果有水平滚动条，还要减去水平滚动条的高度。一般来说，大于整张网页的总高度可以从或上读取。有关坐标的属性返回鼠标事件触发时鼠标相对于元素视口的坐标。
自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比.
| 所属类别 | 属性名 | 意义 | 其他 |
|---|---|---|---|
| 浏览器模型 | Screen.height | 浏览器窗口所在的屏幕的高度（单位像素） |
1.除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。 2.显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。 |
| Screen.width | 浏览器窗口所在的屏幕的宽度（单位像素） | ||
| Screen.availHeight | 浏览器窗口可用的屏幕高度（单位像素） | 因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。 | |
| Screen.availWidth | 浏览器窗口可用的屏幕宽度（单位像素） | ||
| window.innerHeight | 返回网页在当前窗口中可见部分的高度（单位像素） | 1.只读,用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。 2.注意:这两个属性值包括滚动条的高度和宽度 |
|
| window.innerWidth | 返回网页在当前窗口中可见部分的宽度 | ||
| window.outerHeight | 返回浏览器窗口的高度 | 包括浏览器菜单和边框（单位像素）,只读 | |
| window.outerWidth | 返回浏览器窗口的宽度 | ||
| 元素节点 | Element.clientHeight | 返回一个整数值，表示元素节点的 CSS 高度（单位像素） |
1.只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。
2.除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。 3.注意，这个值始终是整数，如果是小数会被四舍五入。 |
| Element.clientWidth | 返回元素节点的 CSS 宽度 | ||
| Element.scrollHeight | 表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分 |
1.只读.
2.它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。 |
|
| Element.scrollWidth | 表示当前元素的总宽度（单位像素） | ||
| Element.offsetHeight | 表示元素节点的 CSS 高度（单位像素） |
1.包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。 2.只读属性。 3.只比 Element.clientHeight和Element.clientWidth多了边框的高度或宽度。 4.如果元素的 CSS 设为不可见（比如display: none;），则返回0。 |
|
| Element.offsetWidth | 表示元素的 CSS 水平宽度（单位像素） | ||
| 备注 |
1.document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）
2.document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight 3.整张网页的总高度可以从document.documentElement.scrollHeight或document.body.scrollHeight上读取。 |
||
有关坐标的属性：
1. MoiseEvent.clientX：返回鼠标事件触发时鼠标相对于元素视口（body）的X坐标。
2. MouseEvent.clientY：返回鼠标事件触发时鼠标相对于元素视口（body）的Y坐标
如果有错误,麻烦您指出,相互学习.
谢谢~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1484.html
摘要：做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的进行页面适配的。手淘那个还有的地方看不懂，还是自己太了，但是看不懂车不影响老司机开车。 做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的flexible.js进行页面适配的。适配的根本原理其实就是将设计稿按一定的...
摘要：做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的进行页面适配的。手淘那个还有的地方看不懂，还是自己太了，但是看不懂车不影响老司机开车。 做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的flexible.js进行页面适配的。适配的根本原理其实就是将设计稿按一定的...
阅读 1310·2021-09-30 09:57
阅读 1053·2021-09-09 09:33
阅读 1936·2021-09-04 16:40
阅读 1576·2021-09-01 10:50
阅读 3088·2021-09-01 10:31
阅读 2324·2019-08-30 15:56
阅读 2802·2019-08-30 15:44
阅读 3357·2019-08-29 17:29
