JavaScript获取页面宽度高度大全

最新推荐文章于 2023-09-07 16:54:08 发布
最新推荐文章于 2023-09-07 16:54:08 发布
阅读量279 收藏
点赞数
分类专栏： JS 文章标签： javascript xhtml ie 工作 html c
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight(包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop(IE7无效)
网页被卷去的左：document.body.scrollLeft(IE7无效)
网页被卷去的高：document.documentElement.scrollTop(IE7有效)
网页被卷去的左：document.documentElement.scrollLeft(IE7有效)
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth


原创：

W3C标准也会对上述取值造成影响，如下是经过我亲自验证的代码：

页面上做如下声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

代码中取值：
document.body.clientHeight;  //这就是当前可视区域的高度
2008/08/27添加：
突然发现这个取高度的方法不是总灵的，郁闷，于是找到另一个比较好的方法
Math.max(document.documentElement.clientHeight,document.body.scrollHeight);  //这就是当前可视区域的高度

document.body.clientWidth;   //这就是当前可视区域的宽度


文章出处:http://blog.csdn.net/gaoyunpeng/article/details/2827462


lenya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
html获取页面高度,js获取各种高度
weixin_42122881的博客
06-04 7829
监听浏览器窗口大小改先来一个浏览器窗口大小改变的事件，用来查看浏览器窗口的大小被改变可以触发一些函数window.onresize 浏览器窗口大小改变事件window.onresize = function () {console.log('浏览器窗口的大小被改变了');something.....}复制代码在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。1. 网页全文...
js获取页面的各种高度大全
sunshineboysy的博客
07-17 1万+
1，获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width2， 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.screen.availWidth 3，网页全文的高度和宽度： document.body.scrollHeight document.body...
获取页面高度和宽度等
卡卡的笔录
12-12 2460
获取页面相关的高度 获取网页可见区域的高（不包括菜单栏） var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; 获取页面body的高（不包括菜单栏，包括滚动条滚动的高度） var bodyHeight = document.documentElement.off.........
html 关于获取页面高度方法
最新发布
xiaozaq的博客
09-07 1371
返回整个屏幕的像素高度，即分辨率高度。如常见的pc系统分辨率是1920*1080，那么返回的值就是1080。对应window.screen.width返回就是1920。即window.outerHeight-页签高度 - 地址栏高度 - 书签栏高度。如果是chrome浏览器模拟手机的话，返回的就是模拟的手机分辨率，与电脑分辨率无关。返回 window.screen.height - 任务栏高度。一般我们页面中希望获取到的就是window.innerHeight。浏览器高度，包含了地址栏、书签栏等高度。
js获取当前页面高度
九亿宅男的梦的博客
10-08 2万+
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
10-25
主要汇总介绍了JavaScript获取网页、浏览器、屏幕高度和宽度的方法，非常使用，有需要的小伙伴参考下。
javascript获取网页高度宽度.rar
01-31
javascript获取网页高度宽度.rar
javascript 获取网页高度宽度.pdf
11-23
javascript 获取网页高度宽度.pdf
javascript获取隐藏元素(display:none)的高度和宽度的方法
10-25
主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
javascript获取滚动条高度 页面宽度与高度
06-10
javascript 获取滚动条高度 页面宽度 页面高度 教程
js获取网页高度(详细整理)
10-27
js获取网页高度包括(网页可见区域高，屏幕分辨率的高，屏幕可用工作区高度,js 获取浏览器高度 js 获取屏幕高度)等等，各种高度,本文详细整理了一些，需要了解的朋友可以参考下
JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
不断成长的我
08-11 4011
浏览器的宽高示意图： JavaScript中常用的方法： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线
前端开发中获取各种高度宽度
老电影故事的博客
04-28 2555
前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 获取这些尺寸。
前端获取各种宽高
chauncywu的博客
12-10 2155
本文原地址 图片仅供参考，由于部分属性各个浏览器解释不一致，有些错误，等研究透后再修改。 1. 获取浏览器宽高 window.innerHeight： 浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。 window.outerHeight： 浏览器高度。 window.innerWidth： 浏览器内页面可用宽度；此宽度包含...
js获取页面宽高
qq_51741194的博客
04-17 1605
通过深入 Document 内部对 body 进行检测，获取窗口大小。
获取当前页面的宽度和高度
热门推荐
qq_36521848的博客
05-18 2万+
jQuery：获取当前打开页面的宽度和高度： var windowheight = $(window).height() - 20; var windowwidth = $(window).width() - 20; if (windowheight > 600){ windowheight = 600; } if (windowwidth > 1100){ windowwidth = 1100; } ...
js获取页面的宽度
dengyujin5391的博客
09-27 3175
JS如何获取屏幕浏览器网页高度宽度网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scro...
h5页面高度宽度自适应
06-10
在 H5 页面中，可以使用 CSS 的单位和属性来实现页面的高度和宽度自适应。...5. 使用 JavaScript：可以使用 JavaScript 来获取浏览器窗口的大小，然后动态设置元素的大小和位置，从而实现页面的自适应布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值