怎么获取网页高度、屏幕高度、滚动高度?

获取当前滚动高度的三种方式 方式一: let scrollHeightOne = document.body.scrollTop; 方式二: let scrollHeightTwo = document.documentElement.scrollTop; 方式三: let scrollHeightThree = window.pageYOffset; 演示代码: /**... 阅读详情
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高。
在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取。

原因: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
前者指明该页面使用旧标准,,后者指明该页面使用新标准。加上W3C以后:

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高)

另:
这里再提供些获取各种高度的代码,条件都是在XHTML中。
var clienth = document.documentElement.clientHeight;  //屏幕高度
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //滚动条滚动高度
var allHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; //整个页面高度
集成电路模拟版图入门-版图基础学习笔记(一) 集成电路设计模拟版图入门笔记,了解版图的定义、意义、工具、设计流程。认识版图及版图组成的两大部件,版图编辑器有哪些,电路图编辑器,了解工艺厂商等。 阅读详情

相关推荐

Win7运行豆包桌面版的兼容性原理与实操方案

Windows 7作为已停止主流支持的操作系统,其与现代Electron应用的兼容性问题本质是API层面的系统调用断层。Electron 28+依赖的GetSystemTimePreciseAsFileTime、SetThreadDescription等Windows 10专属API,在Win7 SP1中天然缺失,导致‘无法定位程序输入点’等典型错误。解决路径并非简单打补丁,而是需理解底层ABI差异、补丁堆叠边界及动态API转发机制。关键技术价值在于通过兼容层(如VxKex NEXT)或运行时降级(Elec

weixin_33290540的博客 1370

【前端】页面高度/滚动高度/滚动条高度

页面示例: 页面代码: 页面高度: //console.log(“实际内容高度” + $(".main").height()); //console.log(“屏幕高度” + document.body.clientHeight); //console.log(“头部标题高度” + $(".flex-center").height()); //console.log(“内容显示高度” + (document.body.clientHeight - $(".flex-center").height()));

weixin_38792911的博客 1710

STM32F103循迹小车PID调参实战:手把手教你整定舵机PD与电机PI参数

本文详细介绍了基于STM32F103的循迹小车PID调参实战,重点讲解舵机PD控制与电机PI参数的整定技巧。通过硬件选型、基础测试、四步调参法和分段控制策略,帮助开发者解决小车蛇形走位等问题,提升循迹性能。文章还分享了高级调试技巧和典型问题排查方法,适用于智能车竞赛和机器人开发。

weixin_42524226的博客 361

js获取元素的滚动高度,和距离顶部的高度

返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)元素距离文档顶端和左边的偏移值。

qq_34295179的博客 882

SAP SD信贷管理实战:从配置到风险控制的完整指南(附后台路径)

本文详细解析了SAP SD信贷管理的完整配置流程与风险控制策略,涵盖信贷控制范围设置、风险分级机制及动态控制配置。通过实战案例和后台路径指引,帮助企业实现从客户信用评估到实时监控的全流程管理,有效降低坏账风险并优化资金安全。

3a9bq4r8t2y的博客 213

C语言 函数

一、什么是函数 二、函数的相关语法 三、函数编码规范

m0_57105760的博客 1891

浏览器滚动条高度的获取

浏览器滚动条高度的获取 开始 最近做业务需求时,需要监听滚动条scoll事件,获取滚动条高度,用的document.body.scrollTop发现得到的值一直是0,后来做了一些查询,挖出不少秘密,做次笔记,以免忘掉 先放结论: 1、对有doctype申明的页面 可以使用document.documentElement.scrollTop 2、没有doctype申明的页面使用:document.body.scrollTop 3、safari:特例独行:使用 window.pageYOffset 所以我们可以

weixin_45727472的博客 4819

非线性动力学_用MatCont分析非线性动力学方程组(一)

写在前面:笔者打算写两到三篇系列文章介绍MatCont,此为第一篇《用MatCont分析非线性动力学方程组(一)》。MatCont是一个基于Matlab而开发的免费工具包,专门用来做非线性动力学模型分叉、向量场、周期性等分析,符号(连续性)运算和数值(离散性)运算均适用。该工具的开发及研究项目由比利时Ghent大学的Willy Govaerts教授、荷兰Utrecht大学的Yuri Kuznets...

weixin_39700215的博客 2770

获取及计算可滚动元素高度:区分clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

前言 获取元素高度,通常 一、基础:理清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop区别 图文可见:https://blog.youkuaiyun.com/qq_35430000/article/details/80277587 说的非常详细,这边列表总结如下: 名称 范围 clientHeight content高度...

cindy647的博客 7336

基于STM32、HAL库的RN8209D电能计量芯片驱动程序设计

/ 假设电压互感器变比为220V:0.5V,电流互感器变比为20A:5mA。// 电压ADC原始值。// 电流ADC原始值。// 有功功率(W)// 电能(kWh)

corlin6688的博客 470

【异常】OpenClaw提示Message ordering conflict - please try again. If this persists, use /new to start a fr

摘要:OpenClaw助手出现"Message ordering conflict"异常时,表明会话消息排序冲突,主要由消息队列时序错乱、会话同步异常或上下文过载引起。解决方案包括:1)基础重试暂停后单发指令;2)最优方案是发送/new重置会话;3)极端情况下需重启客户端或检查指令格式。预防建议包括避免高频并发指令、定期重置会话及确保网络稳定。该报错属业务层异常,不影响账号安全。

奶爸的编程之路,也就一周冷个三天 424

如何获取网页高度、屏幕高度、滚动高度?

有时候需要取页面的底部,就会用到 document.body.clientHeight,在HTML标准中这一句就能取到整个页面的高度,不论 body 的实际内容到底有多高。 在XHTML中,如果body 体中只有一行,则 document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度,就要用 document.documentElement.clientHeight 来获取。 原因: 在HTML中,body 是整个DOM 的根,而...

qq_44731369的博客 2575

学习STM32的CAN总线通信

在配置时,确保您启用了CAN总线功能。CAN节点是CAN总线上的一个设备,每个节点都有唯一的标识符。在CAN总线中,有两种类型的节点:CAN控制器和CAN外设。步骤2:配置CAN总线 在STM32CubeMX中,选择CAN总线模块并进行必要的配置。在CAN总线中,有两个重要的概念:CAN节点和CAN帧。步骤5:测试CAN总线通信 在成功编译和烧录代码后,您可以使用串口调试助手或其他CAN总线工具来测试CAN总线通信。步骤3:编写CAN总线通信代码 在项目的主代码文件中,我们将编写CAN总线通信的示例代码。

2401_85258012的博客 496

js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度

js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度常用:JS 获取浏览器窗口大小 12345678910111213141516// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) &amp;&amp; (document.body.clientWidth))winWidth =...

脚步 6471

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度。判断出现滚动条

网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth 

okkeqin的专栏 2671

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

网页正文、屏幕、滚动条相关

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWid

黄飞的博客专栏 1106

vue 动态获取剩余区域的滚动高度

需求:通过获取屏幕的高度,减去【固定】高度,剩下的高度为【内容】滚动高度。 我们通过下面代码获取屏幕高度: document.documentElement.clientHeight || document.body.clientHeight; 所谓的固定高度,应该是一直停留在屏幕可见范围中,不根据内容进行滚动。如果这个固定高度是一些静态资源时,我们只需通过设置 ref 获取元素的高度。 ...

qq_36437172的博客 2664

Js/Jquery获取网页屏幕可见区域高度

Js/Jquery获取网页屏幕可见区域高度 获取浏览器窗口的可视区域高度和宽度,滚动条高度 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度

滴水石穿 805

div自适应高度, 超出部分出现滚动条

1.  问题 通过 height 设置百分比的方式, 可以自适应高度, 但是不会出现滚动条. 固定值 height 会出现滚动条, 但是各种屏幕的高度不能自适应. 2.  解决 先拿到屏幕高度   let screenHeight = window.innerHeight;   自定义高度 需求1:  超出屏幕高度出现滚动条: 元素高度 = 屏幕高度即可 需求2: ...

jiandan1127的博客 1万+

H5手机端JS常用屏幕宽度和高度获取方法

js获取手机屏幕宽度、高度 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.

hotlinhao的专栏 7685

JS和jquery获取各种屏幕的宽度和高度

从网上找的, 原文地址找不到了。。。    Javascript:    网页可见区域宽: document.body.clientWidth  网页可见区域高: document.body.clientHeight  网页可见区域宽: document.body.offsetWidth (包括边线的宽)  网页可见区域高: document.body.o

css教程 1359

JS获取网页屏幕宽度和高度

网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: document.body.sc

说故事的五公子 163

[js]获取网页屏幕可见区域高度

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElem...

QDY5945的博客 169
上一篇: JS屏蔽右键菜单和禁止刷新F5
下一篇: JavaScript基本教程之JavaScript语言的基础
andybruse
博客等级 码龄16年 5粉丝 11原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值