JS获取和控制浏览器窗口尺寸

最新推荐文章于 2022-01-09 13:54:33 发布
最新推荐文章于 2022-01-09 13:54:33 发布
阅读量487 收藏
点赞数
分类专栏： JS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44646986/article/details/104683886
版权

窗口可视区域大小

可视区域高宽，不含滚动条

  • document.documentElement.clientWidth
  • document.documentElement.clientHeight

可视区域高宽，包含滚动条

  • window.innerWidth
  • window.innerHeight

整个网页文档的高宽

由于各种原因，比较稳定的做法是

let scrollHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body
最低0.47元/天 解锁文章
小蓝Lany
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
10-26
本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码。需要的朋友可以过来参考下，希望对大家有所帮助
用 javascript 控制浏览器窗口大小
幽狼
12-23 3096
  Q：用 JavaScript 控制浏览器窗口大小   A：有时候，我们需要控制显示窗口的大小，这当然能够通过点击窗口右上角的控制按钮来实现。但是，能否在页面中通过链接来实现呢？答案是：能！请看下面的代码：      〈SCRIPT LANGUAGE=“JavaScript“〉       function Minimize()       {       window.innerWidth
js调整浏览器窗口大小
qingmengwuhen1的博客
04-23 1万+
项目js代码： $(window).resize(function() { $('#data-list').height($(window).height() - $('#data-list').offset().top - 50) }); $(window).height():  获得当前窗口的高度。 $('#data-list').offset().top:  获得id为data-li
JS浏览器窗口大小
qq_35366014的博客
08-09 1214
浏览器窗口可视区域大小 获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法: 一、对于IE9+、Chrome、Firefox、Opera 以及 Safari： •  window.innerHeight - 浏览器窗口的内部高度 •  window.innerWidth - 浏览器窗口的内部宽度 二、对于 Internet Explorer 8、7、
JS 获取浏览器窗口大小
lixiaonaaa的博客
11-24 8142
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; els
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
10-21
在本文中，我们将深入探讨如何使用JavaScript获取浏览器高度、窗口高度、元素尺寸以及元素的偏移属性。这些都是前端开发中常见的需求，理解并掌握这些方法对于优化用户体验至关重要。 首先，我们来看如何获取浏览器...
JS获取鼠标位置距浏览器窗口距离的方法示例
10-20
在JavaScript中，获取鼠标位置距浏览器窗口距离是一项常见的需求，尤其是在实现交互式网页功能时。本示例将详细介绍如何通过JavaScript获取这一信息，并提供了一个实际的代码示例，同时解释了不同浏览器之间的兼容性...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
12-02
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...
JS--JavaScript使用window对象控制窗口大小(innerWidth、innerHeight)和位置(moveTo()、moveBy())、设置随机移动弹窗（小网站专用...）
吴声子夜歌的博客
09-24 6704
控制窗口位置 使用window对象的screenLeft和screenTop属性可以读取或设置窗口的位置，即相对于屏幕左边和上边的位置。IE、Opera和Chrome都支持这两个属性。Firefox支持使用window对象的screenX和screenY属性进行相同的操作，Safari和Chrome也同时支持这两个属性。 示例：跨浏览器获取窗口左边和上边的位置 var leftPos = (typ...
Javascript获取页面、屏幕尺寸大小参数
seanchan的专栏
12-02 1766
Javascript获取获取屏幕、浏览器窗口 ，浏览器，网页高度、宽度的大小 网页可见区域宽：document.body.clientWidth  网页可见区域高：document.body.clientHeight  网页可见区域宽：document.body.offsetWidth (包括边线的宽)  网页可见区域高：document.body.offsetHeight (包括边线的宽
javascript 浏览器窗口大小改变事件
03-26
NULL 博文链接：https://272426068.iteye.com/blog/1143976
javaScript 屏幕宽高,浏览器宽高
hoho.的博客
07-14 224
javaScript 屏幕宽高,浏览器宽高 在js中取得屏幕,浏览器等的宽高. 以免混淆,记录下来. 通过写简单html页面进行验证. 调整浏览器位置,大小后,刷新页面,查看控制台输出. (如有错漏,请指正.谢谢!) <!DOCTYPE html> <html> <head> <title>test</title> <scrip...
在某网课学习前端笔记整理js篇27-浏览器窗口高度和宽度和document的一些属性
qq_34338676的博客
03-08 162
浏览器窗口高度和宽度和document的一些属性 摘自与：http://www.jb51.net/article/32679.htm 获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。 IE中，浏览器显示窗口大小只能以下获取： document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中，可以...
js获取滚动条的距离
m0_64337756的博客
01-09 6258
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
JS如何设置并限制浏览器窗口的大小
chichaojing6253的博客
07-29 7760
JS控制浏览器窗口的大小代码之一： <script> window.moveTo(0, 0);//移动窗口 window.resizeTo(800, 600);//改变大小 window.onresize=new Function("window.resizeT...
js 控制浏览器窗口位置，大小
Domando
08-12 3283
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br /><br /> <html><br /> <head><br />     <title>Untitled</title><br />     <script>      <br /> window.scrollBy(0, 1)      <br /> window.resizeTo(0,0)      <br /> window.moveTo(0,
js实现监听浏览器窗口大小改变事件
热门推荐
qq_29207823的博客
08-08 4万+
当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ alert(); }  
offsetLeft、clientHeight、scrollLeft、clientLeft
weixin_30436101的博客
04-28 248
1、offsetLeft 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 ob...
js 获取打开的浏览器窗口
最新发布
05-24
可以使用 JavaScript 中的 `window.open()` 函数来打开一个新的浏览器窗口，同时也可以在函数中指定该窗口的名称，然后可以使用 `window.open()` 函数的返回值来引用该窗口。 例如，下面的代码将打开一个新的浏览器窗口，并将其命名为 "myWindow"： ``` var myWindow = window.open("", "myWindow"); ``` 要获取该窗口的引用，只需要使用该变量名即可。例如，可以使用以下代码来获取该窗口的 URL： ``` var url = myWindow.location.href; ``` 或者，可以使用以下代码来获取该窗口的标题： ``` var title = myWindow.document.title; ``` 需要注意的是，如果该窗口被关闭或者被另一个页面重定向，那么尝试访问该窗口的属性或方法可能会导致错误。为了避免这种情况，可以使用 `if (myWindow && !myWindow.closed)` 进行判断。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值