首页 / JAVASCRIPT / javascript获取网页宽高方法汇总_javascript技巧

javascript获取网页宽高方法汇总_javascript技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript获取网页宽高方法汇总_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3701字，纯文字阅读大概需要6分钟。

内容图文

document.body.clientWidth - 网页可见区域宽
document.body.clientHeight - 网页可见区域高

document.body.offsetWidth - 网页可见区域宽，包括边线和滚动条的宽
document.body.offsetHeight - 网页可见区域高，包括边线和滚动条的高[FF,chrom下是整个页面高，IE opera 下正常]

document.body.scrollWidth - 网页总宽
document.body.scrollHeight - 网页总高

document.body.scrollTop - 有滚动条的时候，向下拖动滚动条，上方不显示的那部分高度
document.body.scrollLeft - 同上

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.screenTop - 网页正文部分上[网页文档的最上方距离屏幕最上方的距离，但FF不支持，Chrom,IE,Opera表现都不同，慎用]
window.screenLeft - 网页正文部分左[网页文档的最左方距离屏幕最左方的距离，但FF不支持，Chrom,IE,Opera表现都不同，慎用]

window.screen.height - 屏幕分辨率的高度
window.screen.width - 屏幕分辨率的宽度

window.screen.availHeight - 可用工作区高度[整个屏幕但不包括下方任务栏]
window.screen.availWidth - 可用工作区宽度[整个屏幕的宽度]

window.screen.clorDepth - 屏幕色彩，常用的16,32位等
window.screen.deviceXDPI - 屏幕像素/英寸【IE支持，其它不支持】

JavaScript 获取页面宽高的方法

在我本地测试当中：
在IE、FireFox、Opera下都可以使用

即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用

可是IE和FireFox则使用

原来是W3C的标准在作怪啊


如果在页面中添加这行标记的话

在IE中：

在FireFox中：

在Opera中：


而如果没有定义W3C的标准，则

IE为：

FireFox为：

代码如下:
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：

代码如下:
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

以上所述就是本文的全部内容了，希望大家能够喜欢。

内容总结

以上是互联网集市为您收集整理的javascript获取网页宽高方法汇总_javascript技巧全部内容，希望文章能够帮你解决javascript获取网页宽高方法汇总_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/326285.html

来源：【匿名】