js获取浏览器和屏幕的各种宽度高度
一：网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）
1.对于IE9+、chrome、firefox、Opera、Safari：
window.innerHeight浏览器窗口的内部高度；
window.innerWidth浏览器窗口的内部宽度；
2.对于IE8.7.6.5:
document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；
document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度；
或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为：
document.body.clientHeight：表示HTML文档所在窗口的当前高度；
document.body.clientWidth：表示HTML文档所在窗口的当前宽度；
结论：
document.body.clientWidth/Height：的宽高偏小，高甚至默认200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。
所以在不同浏览器都实用的的Javascripit方案：
var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight;
二：网页正文全文宽高
scrollWidth和scrollHeight获取网页内容高度和宽度
1.针对IE.Opera：scrollHeight是网页内容实际高度，可以小于clientHeight;
2.针对NS.firefox：scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；
3.浏览器兼容代码：
var w = document.documentElement.scrollWidth || document.body.scrollWidth; var h = document.documentElement.scrollHeight || document.body.scrollHeight;
二：网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）
1.值： offsetWidth = scrollWidth + 左右滚动条 +左右边框；
offsetHeight = scrollHeight + 上下滚动条 + 上下边框；
2.浏览器兼容代码：
var w = document.documentElement.offsetWidth || document.body.offsetWidth ; var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
三：网页卷去的距离与偏移量
1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；
2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；
3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；
4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript事件循环同步任务与异步任务，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型—Object。这里我们不谈复杂数据类型2015-08-08
可以用来运行代码的函数，跟本网站的都差不多。2009-05-05
js打字效果示例js打字效果示例,data-period设置从打字返回删字的时间，data-rotate可加减中英文词语，不用jquery支持2014-01-01
本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
微信小程序Error:Fail to open IDE问题的解决方法
今天学习小程序时无法通过HBuilderX运行微信小程序,查了相关资料后解决了,下面这篇文章主要给大家介绍了关于微信小程序Error:Fail to open IDE问题的解决方法,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了javascript实现瀑布流动态加载图片原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了Three.JS实现三维场景，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
webpack-dev-server 的 host 配置 0.0.0.0的方法
这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下2024-01-01
本文主要介绍了JavaScript判断当前时间是在某个时间点之前/之后，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论