js中的各种宽高

Thanatos 发布于2019-08-29 16:30 / 3077人阅读

摘要：之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽高的定义还是很模糊。嗯，就这样过程中还是有很大收获的

之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽、高的定义还是很模糊。终于没有偷懒，写了个demo理解了一下。网上也有很多整理好的文章，为了加强下自身记忆，顺便也许能给些建议。

element的一些宽、高属性
注：盒子模型： content+padding+margin+border

element.clientWidth =content + 左右padding
element.clientHeight = content + 上下padding
// 元素的内容部分 + 对应的padding（左右/上下）；当外层元素有滚动条时，该值是不包含滚动条的宽度的
// block元素 不设置width的话，默认继承外层元素的宽度 => 因此目标元素的宽 = 外层元素是否有滚动条？(外层元素宽 - 滚动条宽度 - element的左右border - element的左右margin):(外层元素宽 - element的左右border - element的左右margin）；如果不设置height，而且padding也为0的话；即使外层元素高度值再大，目标元素的clientHeight仍为0

element.clientLeft = 左border
element.clientTop = 上border
// 元素的边框宽度

element.scrollWidth = content + 左右padding
element.scrollHeight = content + 上下padding
// 与元素的clientWidth相同

element.scrollLeft = 超出浏览器部分的最左侧到浏览器最左侧的距离（即为文档卷出浏览器的部分长度）
element.scrollTop = 超出浏览器部分的最上侧到浏览器最上侧的距离（即为文档卷出浏览器的部分高度）

element.scrollWidth = content + 左右padding
element.scrollHeight = content + 上下padding
// 与元素的clientWidth相同

element.offsetWidth = content + 左右padding + 左右border
element.offsetTop = content + 上下padding + 上下border

element.offsetLeft = element最左侧距离（从border外开始）外层元素的距离
element.offsetTop = element最上侧距离（从border外开始）外层元素的距离
// 这个值是固定的，不会随着滚动发生变化

注：ie/chrome/firefox获取body的scrollTop和scrollLeft时，直接用document.body.scrollTop取到的值都是0；要改为document.documentElement.scrollTop；或者使用window.pageXOffset,这个属性兼容性会高一些，ie8以上以及firefox、chrome都支持

window的一些宽、高属性

window.innerWidth = 浏览器可视区域的宽度（包含滚动条宽度）
window.outerWidth = 浏览器可视区域的宽度（包含滚动条宽度）
// 在chrome/firefox上测试 window的innerWidth和outerWidth是一样的
// **ie测试结果有点疑问，还要排查下再来补充**

window.screenLeft = 浏览窗口距离屏幕可视区域最左侧的距离
window.screenTop = 浏览窗口（包含顶部地址栏、工具栏）距离屏幕可视区域最上侧的距离
// chrome测试结果，在主屏幕上的结果：screenLeft:0;screenTop:0;
//但是在外接显示屏中的浏览器打开就有问题；外接显示屏的距最左侧距离不是从0开始而是从主屏幕的可见区域宽度开始的，因此此时screenLeft的值为主屏幕的宽度；screenTop也一样存在差值；外接显示屏应该也是以主屏幕的边界为参考
// firefox不支持这两个属性
// 在ie中;screenTop的最小值不是0，而是顶部地址栏和工具栏的高度。

window.screenX = 浏览窗口距离屏幕可视区域最左侧的距离
window.screenY = 浏览窗口（包含顶部地址栏、工具栏）距离屏幕可视区域最上侧的距离
// chrome测试结果： 与screenLeft/screenTop测试结果一致
// firefox测试结果： 与chrome的screenLeft/screenTop结果一样
// ie测试结果都为：-8？？有点奇怪

window.pageXOffset = 超出浏览器部分的最左侧到浏览器最左侧的距离（即为文档卷出浏览器的部分长度）
window.pageYOffset = 超出浏览器部分的最上侧到浏览器最上侧的距离（即为文档卷出浏览器的部分高度）
// 在chrome/firefox/ie 上测试；结果都相等，且等价于scrollTop/scrollLeft的值；兼容性要好于scrollTop/scrollLeft

screen的宽/高

screen.width = 屏幕的宽度（分辨率宽）
screen.height= 屏幕的高度（分辨率高）
// 在chrome/firefox/ie 上测试；结果都相等，屏幕的分辨率，与浏览器窗口大小无关

screen.availWidth = 屏幕的宽度（分辨率宽）
screen.availHeight= 屏幕的高度（分辨率高）
// firefox/chrome/ie availHeight 与电脑窗口的顶部导航栏和底部导航栏的高度有关（注意不是浏览器内部的导航栏）
// availWidth 与电脑窗口的左侧导航/工具栏和右导航/工具栏的高度有关（注意不是浏览器内部的导航栏）

点击事件的event对象里的一些宽、高

e.clientX = 当前鼠标距离浏览器最左侧的距离
e.clientY = 当前鼠标距离浏览器最上侧的距离（不包含工具栏、地址栏）
// 原点:(0,0)
// chrome/firefox/ie  结果一致，主屏与外接屏结果也一致

e.screenX = 当前鼠标距离浏览器最左侧的距离 
e.screenY = 当前鼠标距离浏览器最上侧的距离（包含工具栏、地址栏）
// 原点:(0,浏览器的工具栏+地址栏的高度+屏幕顶部导航/工具栏的高度（如果有的话）)
// chrome/firefox/ie 在主屏上都 = clientX；在外接显示屏中，受主屏幕影响存在偏差

e.offsetX = 当前鼠标距离当前元素最左侧的距离
e.offsetY = 当前鼠标距离当前元素最上侧侧的距离
// chrome/firefox/ie 结果一致，主屏与外接屏结果也一致

e.pageX = 当前鼠标距离浏览器最左侧的距离
e.pageY = 当前鼠标距离浏览器最上侧的距离（不包含工具栏、地址栏）

e.x = 当前鼠标距离浏览器最左侧的距离
e.y = 当前鼠标距离浏览器最上侧的距离（不包含工具栏、地址栏）

一般而言（无外接屏幕） e.clientX = e.screenX = e.x = e.pageX；e.clientY = e.screenY = e.Y = e.pageY

写在最后的话

心累啊，各种浏览器对一些属性的支持还不一样，结果也不一样；以前框架用得太多，公司这边对兼容性要求也没有很大，所以写法少很少有注重兼容性问题；虽然其中的大部分属性也许一时半会儿用不到，但是捋清楚还是好的，ie的一些测试，等用同事电脑测过再回头改改。嗯，就这样；过程中还是有很大收获的！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113788.html

JavaScript中的各种宽高以及位置总结

摘要：和这一对属性是用来读取元素的的宽度和高度的。第二部分对象在中，对于元素的运动的操作通常都会涉及到对象，而对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。文章转自中的各种宽高以及位置总结在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时...

microelec 2019-08-21 10:26 评论0 收藏0
JavaScript中的各种宽高属性

摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 评论0 收藏0
JS、jQuery各种宽高属性

摘要：下各种宽高和下宽高分为挂载在对象和对象下的宽高属性，先说下和的区别对象表示浏览器中打开的窗口，对象可以省略，比如可以简写为对象是对象的一部分，那么我们可以写成，浏览器的文档成为对象下的宽高属性浏览器窗口内部宽度浏览器窗口内部高度浏览器窗口外 JS下各种宽高 Window和Document:JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Do...

CntChen 2019-08-22 10:46 评论0 收藏0
js中的各种宽高

摘要：之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽高的定义还是很模糊。嗯，就这样过程中还是有很大收获的之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽、高的定义还是很模糊。终于没有偷懒，写了个demo理解了一下。网上也有很多整理好的文章，为了加强下自身记忆，顺便也许能给些建议。 element的一些宽、高属性注：盒子模型： content+padding+mar...

luckyyulin 2019-08-23 11:26 评论0 收藏0
js中的各种宽高

摘要：之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽高的定义还是很模糊。嗯，就这样过程中还是有很大收获的之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽、高的定义还是很模糊。终于没有偷懒，写了个demo理解了一下。网上也有很多整理好的文章，为了加强下自身记忆，顺便也许能给些建议。 element的一些宽、高属性注：盒子模型： content+padding+mar...

banana_pi 2019-08-02 11:19 评论0 收藏0