JavaScript 获取页面宽高的方法 (转载)

最新推荐文章于 2022-06-14 16:08:50 发布
最新推荐文章于 2022-06-14 16:08:50 发布
阅读量89 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript IE Firefox Opera XHTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leo2410/article/details/83535185
版权
JavaScript 获取页面宽高的方法2010年01月19日 下午 06:06JavaScript 获取页面宽高的方法

<script>
function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
如果在页面中添加这行标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度


在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
leo2410
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript如何获取网页的宽高，以及如何兼容（各种坑详解）
weixin_44552302的博客
05-10 357
很多场景下会需要获取当前网页的宽高来达到一些效果，但是获取网页的宽高这里面还是有一点（hen duo）坑的，这里我进行了总结和详解，若有补充欢迎评论补充~ 方式一：window.innerWidth / window.innerHeight 这种方式只支持IE9以及以上版本的浏览器 网页高度，打开F12控制台当然高度会不同 方式二：document.documentElement.clientWidth console.log(document.documentElement); console.lo
JavaScript获取页面宽度高度大全(转载)
weixin_30273175的博客
07-31 231
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth(包括边线的宽) 网页可见区域高：document.body.offsetHeight(包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高...
js获取页面宽高常用
yang651158的博客
02-05 97
var winheight = document.documentElement.clientHeight; var winwidth = document.documentElement.clientWidth;
前端涉及的宽高（简单汇总）
Kevin_zuo的博客
09-17 598
offsetLeft/offesetTop,相对于父元素， offsetWidth/offsetHeight,指元素的宽高 event.clientX/event.clientY,鼠标相对于浏览器 图片摘自：慕课网，放大镜特效课程 style.left 图片摘自：慕课网，放大镜特效课程 图片摘自：HTML 获取屏幕、浏览器、页面的高度宽度- 方木一- 博客园 原生js中宽高： win
JavaScript获取网页的宽高
Cao_Mary的博客
05-10 537
获取网页可视区域的宽高，分不同情况下共计三种方式： 可视区域：当前浏览器窗口可见的部分，不包括可以滚动的区域。 方法一：IE9及IE9以上的浏览器 使用innerWidth、innerHeight可以获取网页可视区域的宽高 console.log(window.innerWidth);//可视区域的宽 console.log(window.innerHeight);//可视区域的高 方法二：...
js中动态获取页面的高度和宽度的方法总结
u012994320的博客
10-17 9251
javascript,jquery获取网页的高度和宽度： javascript: 可视区域宽：document.documentElement.clientWidth(width+padding) 可视区域高：document.documentElement.clientHeight(height+padding) 同时也可以使用另一种进行表示： 可视区域宽：document.body....
页面刷新方法汇总（转载）
03-05
本篇文章将详细探讨各种页面刷新方法，并基于提供的信息进行深入解析。 首先，页面刷新通常分为两种类型：客户端刷新和服务器端刷新。客户端刷新是指在浏览器端执行的刷新操作，而服务器端刷新则涉及服务器的参与。...
【转载】javaScript常用的东东
08-07
JavaScript是一种广泛应用于Web开发的脚本语言，它在浏览器端运行，为网页添加交互性，使得用户能够与页面进行动态沟通。这篇博文整理了55个JavaScript中的常用方法，涵盖了数组操作、对象处理、字符串处理、函数...
带收藏转载的jquery瀑布流.zip
11-25
例如，可以使用`$(window).scroll()`函数来绑定滚动事件，`$(window).scrollTop()`和`$(document).height()`等方法获取当前滚动位置和页面总高度，判断是否需要加载更多内容。 ```javascript $(window).scroll...
JS获取网页各种宽高
yanyi_6532的博客
06-14 879
JS获取网页各种宽高
MongoDB的Linux安装、基本操作、可视化、实验源码与报告文档
最新发布
07-10
MongoDB的Linux安装 在Linux上安装MongoDB，通常可以通过包管理器（如apt-get、yum等）或从MongoDB官网下载压缩包进行手动安装。以下是通过包管理器安装MongoDB的简要步骤（以Ubuntu为例）： 更新系统： 打开终端，使用sudo apt-get update命令更新系统包列表。 安装MongoDB： 使用sudo apt-get install -y mongodb命令安装MongoDB。这将自动处理依赖关系，并安装MongoDB服务器。 启动MongoDB服务： 安装完成后，可以使用sudo systemctl start mongod命令启动MongoDB服务。 验证安装： 使用mongo命令连接到MongoDB shell，如果能够成功连接并显示MongoDB的shell提示符，则表示MongoDB已成功安装并正在运行。 注意：以上步骤是基于Ubuntu系统的示例。对于其他Linux发行版，安装命令可能有所不同。此外，也可以从MongoDB官网下载.tgz压缩包进行手动安装，具体步骤包括下载、解压、配置环境变量、创建数据存储目录等。 M
数据质量管理（41页 PPT）.ppt
07-10
数据质量管理（41页 PPT）
宁波市建筑物矢量数据（Shp格式+带高度）.txt
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
docker的配置与安装
07-10
你还在为安装docker发愁吗？ 你还在为找不到docker安装包而焦虑吗？ 你还在为找不到yum源而转而挠腮吗？ 你还在为安装docker仓库的不死不得其解吗？ 来吧，来我这里，一篇文章解决你的疑惑，释放你的压力，让你顿觉豁然开朗。 我不是谁的救世主， 但我能让你在安装docker的道路上节省那么点儿时间、少走那么点儿弯路！ 如果你正在安装docker,来我这里看看。
linux常用命令大全.txt
07-10
linux
包头市建筑物矢量数据（Shp格式+带高度）.txt
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
060N10NS3-VB一款N-Channel沟道DFN8(5X6)的MOSFET晶体管参数介绍与应用说明
07-10
060N10NS3-VB；Package：DFN8(5X6)；Configuration：Single-N-Channel；VDS：100V；VGS：20（±V）；Vth：1~3V；RDS(ON)=6mΩ@VGS=4.5V；RDS(ON)=5mΩ@VGS=10V；ID：100A；Technology：Trench；
Kotlin基础教程.pdf
07-09
Kotlin基础教程.pdf
Spark_Base_Demo.ipynb
07-10
Spark_Base_Demo.ipynb
js获取页面图片宽高大小
07-27
要通过JavaScript获取页面图片的宽高大小，可以使用不同的方法。一种常见的方法是使用jQuery的`.width()`和`.height()`方法来获取图片的宽度和高度。这些方法可以直接应用于图片元素，例如`$('img').width()`和`$('img').height()`。\[2\] 另一种方法是使用JavaScript的`.offsetWidth`和`.offsetHeight`属性来获取图片的宽度和高度。这些属性返回的是元素在页面中的实际宽度和高度，包括边框和内边距。例如，可以通过`document.querySelector('img').offsetWidth`和`document.querySelector('img').offsetHeight`来获取图片的宽度和高度。\[2\] 还有一种方法是直接通过图片元素的属性值`.width`和`.height`来获取宽度和高度。如果图片元素没有设置这些属性，它们将返回0。例如，可以通过`document.querySelector('img').width`和`document.querySelector('img').height`来获取图片的宽度和高度。\[3\] 需要注意的是，使用这些方法获取图片的宽高大小时，确保在图片加载完成后再进行获取，以避免获取到不准确的值。可以使用`window.onload`事件或者`img.onload`事件来确保图片已经加载完成。\[2\] #### 引用[.reference_title] - *1* *2* [Android 获取图片真实宽高](https://blog.csdn.net/weixin_35690047/article/details/112889680)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [JS获取img图片的原始尺寸高度和宽度](https://blog.csdn.net/mouday/article/details/124845668)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值