js获取页面高度

最新推荐文章于 2024-05-04 14:55:11 发布
最新推荐文章于 2024-05-04 14:55:11 发布
阅读量759 收藏
点赞数
分类专栏： JAVASCRIPT/CSS 文章标签： firefox opera xhtml ie 工作 function

<script type="text/javascript">
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 +" 像素/英寸"; 
}
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高）

菜菜_JING
关注
专栏目录
js获取网页高度(详细整理)
10-27
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
js获取当前页面高度
热门推荐
九亿宅男的梦的博客
10-08 2万+
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
js获取页面的各种高度大全
sunshineboysy的博客
07-17 1万+
1，获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width2， 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.screen.availWidth 3，网页全文的高度和宽度： document.body.scrollHeight document.body...
获取屏幕高度的js方法，完成响应式布局！！
m0_56125881的博客
07-07 7440
根据屏幕大小设计不同的css来适应不同的屏幕效果
JS如何获取网页的宽高
子玉的博客
03-12 1576
这些方法将返回视口（viewport）的宽度和高度，即可见区域的宽度和高度，不包括滚动条和其他浏览器窗口装饰的部分。要获取网页的宽度和高度，可以使用 JavaScript 来动态获取。这些代码将返回整个文档的宽度和高度，包括滚动条和隐藏部分。希望这些信息能够帮助到你。如有其他问题，欢迎随时向我提问。
JS高级使用3.0——JS中获取页面的高度、距离顶部的距离
最新发布
蓝桉
05-04 2056
获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()
JS实现点击按钮获取页面高度的方法
10-23
首先，需要了解的是在JavaScript中获取页面元素高度的不同属性和方法。页面元素的高度可以通过多种属性来获取，比如offsetHeight、scrollHeight等。其次，需要掌握如何在用户交互（例如点击按钮）时获取并显示这些...
javascript 获取网页高度宽度.pdf
11-23
以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置：** - `getScrollTop()` 函数用于获取当前页面滚动条的垂直偏移量。这个函数通过检查 `document....
javascript获取网页高度宽度.rar
01-31
总结，JavaScript获取网页高度和宽度的方法多种多样，可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域，理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
js获取屏幕、浏览器、页面的宽度和高度
m0_60316162的博客
07-06 2854
window、document.body和document.documentElement区别 window是浏览器的窗口，他是一个顶层对象，保存着 DOM，BOM，核心JS 等所有内容，而不是另一个对象的属性； document对象是window的子属性，是当前显示于窗口或框架内的一个文档。 documentElement是整个节点树的根节点root，即<html>； body是DOM对象里的body子节点，即body标签，包含在<html>内部； 在标准浏览器里面，h
Javascript 获取页面高度（多种浏览器）
06-18
关于获取各种浏览器可见窗口大小的一点点研究。使用javascript轻松实现日常需要的功能。
javascript获取滚动条高度 页面宽度与高度
06-10
javascript 获取滚动条高度 页面宽度 页面高度 教程
JS获取屏幕的高度
Redamancy的博客
07-29 1万+
1，获取屏幕的宽度： window.screen.width //整个屏幕的宽度 2，获取屏幕的高度： window.screen.height //整个屏幕的高度 3，获取网页的宽高（不含边框）。 3，1 获取整个网页的宽度：document.body.scrollWidth 3，2 获取整个网页的高度：document.body.scrollHeight 4，获取body的宽高（不含边框）。 4，1 获取整个body的宽度：document.body.clientWidth 4，2 获取整
js获取页面各种高度
一个老码农
10-29 1455
if(parent.document.getElementById("mainframe") != null) parent.document.getElementById("mainframe").height=this.document.documentElement.offsetHeight+"px"; 网页可见区域宽：document.body.clientWidth; 网页可见区
js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度
angrynouse的博客
06-12 2837
element代表元素节点，代表页面中的一个个标签，也是DOM树的叶子。
JS获取页面高度方法小结
zhuyunhe的专栏
07-23 985
/* document.body是为了兼容chrome浏览器 */ //获取到滚动条距可视页面顶部的位置 function getScrollTop(){ var scrollTop = 0; //经测试，在chrome和ff下，document.documentElement.scrollTop并没有什么卵用，都是一直返回0。但在IE下是好使的，可怜的IE。 if(document.doc
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
html获取页面高度,js获取各种高度
weixin_42122881的博客
06-04 7893
监听浏览器窗口大小改先来一个浏览器窗口大小改变的事件，用来查看浏览器窗口的大小被改变可以触发一些函数window.onresize 浏览器窗口大小改变事件window.onresize = function () {console.log('浏览器窗口的大小被改变了');something.....}复制代码在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。1. 网页全文...
js动态获取界面高度
zhengjingID的博客
03-01 2275
网页可见区域（body）宽： document.body.clientWidth 网页可见区域（body）高： document.body.clientHeight//最常用、兼容性强的两个 网 页可见区域宽：document.documentElement.clientWidth 网页可见区域高：document.d...
JavaScript获取页面与元素尺寸函数详解
"这篇文章主要汇总了JavaScript中用于获取页面元素及窗口高度和宽度的各种函数，包括获取视窗大小、元素自身大小以及可见区域尺寸的方法。通过示例代码展示了如何操作DOM元素来获取这些信息，适合JavaScript初学者和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值