Web前端开发笔记之JS回顾08——JS各种宽高、距离等，窗口变化

最新推荐文章于 2025-05-30 11:40:16 发布
原创 最新推荐文章于 2025-05-30 11:40:16 发布 · 287 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

本文详细介绍了JavaScript中获取页面元素宽高及距离的scroll、offset和client系列方法，包括它们的区别和使用场景。同时，还讨论了窗口变化触发事件的处理，为前端开发者提供了实用的参考资料。

目录

scroll系列:

offset系列:

 client系列：

 窗口变化触发事件：

这里我将罗列所有在JS中的宽高距离等相关的方法。具体如下：

scroll系列:

获取页面HTML内容的长宽距离，不能使用

document.querySelector('html')

由于兼容性问题，html获取需要使用，document.documentElement 。

offset系列:

 

 client系列：

 

三大系列详细区别如下： 

 窗口变化触发事件：

 

JavaScript窗口大小变化事件：window.resize
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
01-12 4102
JavaScript作为一种前端开发的关键性语言，为实现动态、交互性强的网页效果提供了有力的支持。其中，窗口调整事件 window.resize 在响应式设计和用户体验优化中扮演着重要的角色。通过监听窗口大小的变化，开发者可以动态调整页面布局、样式，以适应不同设备和屏幕尺寸，提供更好的用户体验。
前端 ECharts 优化图表响应式布局的方法
AI架构全栈开发实战笔记
05-28 868
本文针对前端开发者在使用ECharts时遇到的“图表在不同屏幕尺寸下显示异常”问题，系统讲解响应式优化的核心思路与具体实现方法。覆盖从基础容器适配到复杂动态配置调整的全流程，适用于移动端H5、数据看板、BI系统等常见业务场景。本文将按照“问题认知→原理理解→方法详解→实战演示→避坑指南”的逻辑展开：首先用生活案例说明响应式布局的重要性，接着拆解ECharts的布局机制，然后分7类讲解优化方法，最后通过完整代码案例演示全流程，并总结常见问题解决方案。原理。
js实时监听窗口变化总结
weixin_30628801的博客
02-10 632
<script> window.onresize = function () { var Width = window.innerWidth//浏览器窗口的内部宽度（包括滚动条） || document.documentElement.clientWidth || document.body.clientWidth; var Height =...
javascript 浏览器窗口大小改变事件
03-26
NULL 博文链接：https://272426068.iteye.com/blog/1143976
《前端》网页随着窗口大小改变而变化。
BelleDiao的博客
02-15 4659
针对写好的网页随着窗口大小改变，里面布局变乱的解决方法_JavaScript_Ariel的博客-优快云博客 https://blog.youkuaiyun.com/Ariel_201311/article/details/79947377 HTML页面中解决内容元素随窗口变化布局变乱问题_网络_weixin_33739523的博客-优快云博客 https://blog.youkuaiyun.com...
学习使用js监测浏览器窗口大小变化
徊忆羽菲
06-06 2755
在JavaScript中，可以通过监听resize事件来检测浏览器窗口的大小变化。以下是一个简单的示例代码，用于检测浏览器窗口大小的变化并在控制台输出新的窗口尺寸：
前端 Vue.js 与 Vue Router 的深度集成
最新发布
小白菜的博客
05-30 801
当你用 Vue.js 开发一个电商网站时，可能会遇到这样的问题：用户点击“商品详情”链接，页面闪一下才加载新内容——这太影响体验了！这时候，Vue Router 就像一个“魔法调度员”，能让页面在不刷新的情况下切换内容，实现“单页应用（SPA）”的丝滑效果。本文将覆盖 Vue Router 与 Vue.js 集成的核心场景：从基础路由配置到动态路由、从导航守卫到权限控制，帮你彻底掌握这对“黄金组合”。本文将按照“故事引入→核心概念→原理拆解→实战演练→应用场景→未来趋势”的逻辑展开。
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
JavaScript实用代码片段集合
仅表明这是一些零散的JavaScript代码集合，但从其标签与压缩包内包含的文件（README.txt 和 main.js）可以深入挖掘出多个关键知识点，涵盖前端开发实践、工具函数设计、代码组织结构、算法实现以及文档说明等多个...
Web APIs 全套详细笔记——案例
qq_64816065的博客
06-11 263
严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心
JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)
weixin_45406850的博客
02-16 4735
【代码】JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)
响应式Web设计:随着浏览器宽度改变调整网页大小(转)
weixin_30755709的博客
01-30 1361
link：http://www.jscode.cn/web/v74897 网页制作文章简介：响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户 在...
前端总结之html：窗口大小改变页面
SchopenhauerZhang的博客
11-19 3万+
学前端有一段时间了，想总结的一致没时间，今天开始写吧！ 万事开头难，今天开始写希望能坚持！ 当写页面时，我们都会遇到用户会拉伸窗口，改变窗口的大小。比如我们先写一个div,在页面代码中有注释帮助阅读。新手入门，我尽量每行都有注释。
JS动态调整页面宽度
weixin_33935777的博客
01-05 789
window.onresize = function(){ var nav=doc("ulNavigate"); if(document.body.clientWidth < 1000){ nav.style.width = "1000px"; }else{ nav.style.width = "100%"; } } --...
当窗口改变时，实时获取盒子距离右边窗口的距离
wei1359765074410的博客
12-07 659
当窗口改变时，实时获取盒子距离右边窗口的距离 /*$(window).resize(function () { console.log($(window).width()-$(".loginDiv").offset().left-$(".loginDiv").width()); console.log("logdiv"+$(".loginDiv").width()) })*/
Web前端最全vue 监听窗体变化 echarts自适应，2024年最新京东的面试题
2401_84617681的博客
05-16 1016
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】窗体变化echarts报表重新渲染问题当窗体变化之后，echarts会搓板，不能自适应，需要处理，下面是处理的方式。就像下面这张图，如果不适应，当浏览器缩放echarts报表就是单纯的跟浏览器大小缩放（左），而自适应了之后，或根据浏览器缩放重新渲染合适的大小（右）。首先需要一个js文件 a.js，把他放到 public 文件夹 js 文件夹下就可以。
JavaScript(22)——页面尺寸事件
m0_74386799的博客
08-20 551
document.documentElement.clientHeight 高。document.documentElement.clientWidth 宽。包含边框(只读)：获取的是自己定位的父级元素的左上距离。
js 获取当前元素距离窗口的距离（getBoundingClientRect）
szl199107101035的博客
03-31 5778
含义：返回元素的大小及其相对于视口的位置。如下 let box = document.getElementById('box'); console.log(box.getBoundingClientRect()) 通过上图中的bottom、left、right、top获取元素距离窗口的距离 ps：1、得到的是相对于视图的距离，如果页面滚动距离也会发生变化 2、scrolltop和offsettop是相对于父元素而言的 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言行物恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值