原生js获取浏览器窗口及元素宽高常用方法集合
更新时间：2017年01月18日 17:12:50 作者：夏天不做梦
本文主要介绍了原生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;（在元素的包含元素不含滚动条的情况下）
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了js自定义trim函数实现删除两端空格功能,结合实例形式分析了javascript基于正则替换实现类似trim函数删除字符串两端空格的相关操作技巧,并附带jQuery类似功能函数使用方法,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了BootStrap实现鼠标悬停下拉列表功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了ES6数组的扩展,结合实例形式详细对比分析了ES6数组的新增方法与相关使用技巧,需要的朋友可以参考下2017-04-04
今天小编就为大家分享一篇解决layui弹出层layer的area过大被遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家分享了bootstrap table操作技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
在实际开发中我们经常需要获取其他域的资源，本篇文章主要介绍了详解Javascript几种跨域方式总结，有兴趣的可以了解一下。2017-02-02
这篇文章主要为大家详细介绍了javascript实现花样轮播效果，一种是带按钮的轮播，一种是自动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
今天小编就为大家分享一篇layer.js之回调销毁对话框的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文主要介绍了js实现简单手风琴效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
动态控制Table的js代码...2007-03-03
最新评论