原生js获取浏览器窗口及元素宽高常用方法集合
窗口可视区域宽度： document.documentElement.clientWidth || document.body.clientWidth;
窗口可视区域高度： document.documentElement.clientHeight || document.body.clientHeight;
窗口可视区域宽度+边线和滚动条： document.body.offsetWidth ;
窗口可视区域高度+边线和滚动条： document.body.offsetHeight ;
实际内容的宽度： document.body.scrollWidth;
实际内容的高度： document.body.scrollHeight;
滚动条下拉被卷起来的距离：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
滚动条侧拉被卷起来的距离：document.body.scrollLeft || document.documentElement.scrollLeft ;
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
元素的宽度：obj.offsetWidth;
元素的高度：obj.offsetHeight;
相对于父元素的上位移：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）
相对于父元素的左位移：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
在最近做的微信小程序中需要实现一个自带的客服功能,下面这篇文章主要给大家介绍了关于微信小程序实现客服功能(客服消息)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
JavaScript使用64位浮点数表示数字（基于IEEE 754标准）,这导致某些十进制数字在计算过程中出现精度丢失,所以本文给大家介绍了JavaScript数字精度丢失问题的解决方案,需要的朋友可以参考下2024-10-10
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
这篇文章主要介绍了Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
JavaScript已经内置了很多强大的方法，但有时你需要的某个功能在内置的方法中没有，我们怎么来优雅地扩展JavaScript功能呢2012-04-04
这篇文章主要为大家讲解了JavaScript数学对象——数字进制转换的实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序实现音乐播放器实例完整流程,通过本章的学习,读者能够掌握小程序的基本交互逻辑的开发,能够运用API来实现项目中的特定功能,学会解决开发过程中常见的问题,需要的朋友可以参考下2024-10-10
解决layui的form里的元素进行动态生成,验证失效的问题
今天小编就为大家分享一篇解决layui的form里的元素进行动态生成,验证失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
JavaScript中解决闭包只能取得包含函数中任何变量最后一个值的问题2010-08-08
这篇文章主要介绍了微信小程序实现列表的横向滑动，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
IntersectionObserver判断是否在可视区域详解
这篇文章主要为大家介绍了IntersectionObserver判断是否在可视区域详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论