使用jQuery连续获取窗口大小

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以方便地获取和操作 DOM 元素。

类型

在 jQuery 中，获取窗口大小主要通过以下几种方式：

$(window).width()：获取窗口的宽度。
$(window).height()：获取窗口的高度。
$(window).innerWidth()：获取窗口的内部宽度（包括滚动条）。
$(window).innerHeight()：获取窗口的内部高度（包括滚动条）。
$(window).outerWidth()：获取窗口的外部宽度（包括边框）。
$(window).outerHeight()：获取窗口的外部高度（包括边框）。

应用场景

在响应式设计、动态调整布局、滚动事件处理等场景中，经常需要获取窗口大小。

示例代码

以下是一个使用 jQuery 连续获取窗口大小的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Get Window Size</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="windowSize"></div>

    <script>
        function updateWindowSize() {
            var width = $(window).width();
            var height = $(window).height();
            $('#windowSize').text('Width: ' + width + 'px, Height: ' + height + 'px');
        }

        $(document).ready(function() {
            updateWindowSize(); // 初始获取窗口大小
            $(window).resize(updateWindowSize); // 监听窗口大小变化
        });
    </script>
</body>
</html>

参考链接

jQuery 官网

常见问题及解决方法

问题：为什么窗口大小变化时，更新不及时？

原因：可能是由于事件处理函数没有正确绑定到窗口的 resize 事件上。

解决方法：确保在文档加载完成后绑定事件处理函数，并且在事件处理函数中正确更新窗口大小。

$(document).ready(function() {
    $(window).resize(updateWindowSize);
});

问题：为什么获取到的窗口大小不准确？

原因：可能是由于在 DOM 元素还没有完全加载时就尝试获取窗口大小。

解决方法：确保在文档加载完成后再获取窗口大小。

$(document).ready(function() {
    updateWindowSize();
});

通过以上方法，你可以有效地使用 jQuery 连续获取窗口大小，并解决常见的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

win10 uwp 设置启动窗口大小获取窗口大小设置启动窗口获得窗口大小

本文主要说如何设置我们窗口的启动大小，UWP启动窗口大小。...设置启动窗口设置窗口大小 ApplicationView.PreferredLaunchViewSize = new Size(1000, 1000);...在手机没有用，手机就全屏，其他没用如果设置过屏幕大小导致了每次开启窗口都变小，那么可以简单使用（下面代码没有测试） ApplicationView.PreferredLaunchWindowingMode...，其实使用下面代码窗口最小 ApplicationView.GetForCurrentView().SetPreferredMinSize(new Size(200, 100)); 获得窗口大小 Window.Current.Bounds.Width...获取窗口高度 Window.Current.Bounds.Height 但是如果我们需要判断我们的窗口大小变化的话，一个简单的方法，使用动态适应 <VisualStateManager.VisualStateGroups

5.3K2 0

win10 uwp 设置启动窗口大小获取窗口大小设置启动窗口获得窗口大小

4.2K2 0

win10 uwp 设置启动窗口大小获取窗口大小

1.9K2 0

jquery获取日期,对比日期大小

startTime=$("#beginScanTime").val(); var endTime=$("#endScanTime").val(); var today=new Date();//获取当前时间...(没有格式化) var year=today.getFullYear();获取年份,四位数 var month=today.getMonth()+1;获取月份,0-11 var day...=today.getDate();获取几号 if(month<=9){//格式化 month="0"+month; } if(day<=9){ day="0"+day;...} today=year+"-"+month+"-"+day; if(today>startTime){//对比日期大小 alert("开始监控日期要大于当前日期!")

4.7K2 0

C语言获取当前输出窗口的大小

C程序的输出结果是在标准的输出设备上，通常情况下，在Win环境下，其输出在一个字符窗口上，现在试问，如何得到该字符输出窗口的大小，也即该窗口容纳多少字符，？行 * ？列。 ...;将字符串输出到输出窗口中，在当前确省光标位置上将Hello!依次输出到窗口上，如果当前行不足，则折行输出。...main() { printf("\n"); for ( int i=1;i<=10;i++) printf("0123456789"); } 同理，按此方法我们可以得到窗口所容纳的字符行数...main() { int i; printf("\n"); for ( i=1;i<50;i++) printf("%4d\n",i); } 记录当前显示窗口首行及末行显示的数值即可

3.3K0 0

js、jQuery 获取文档、窗口、元素的各种值

基于两年开发经验，总结了 javascript、jQuery 获取窗口、文档、元素的各种值 javascript：文档：是整个document所有的内容浏览器当前窗口文档body的宽度： document.body.clientWidth...;(仅仅是body的width) 浏览器当前窗口文档body的高度： document.body.clientHeight;(仅仅是body的height) 浏览器当前窗口文档body的宽度： document.body.offsetWidth...： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth jQuery...：$(document).height(); 获取页面的文档宽度：$(document).width(); 浏览器当前窗口文档body的高度： $(document.body).height(); 浏览器当前窗口文档...鉴于layerY和offsetY的不同，要兼容的使用二者要注意　　1.触发事件的元素一定要设置定位属性。

14.1K3 2

jquery 与javascript 获取元素尺寸大小的对比

jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。...js获取尺寸的方法 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...Window 尺寸有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。...对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth...包含上面的浏览器地址等所有上面的部分) screen.availHeight - 可用的屏幕高度(不包含下面的任务栏，包含上面的浏览器地址等所有上面的部分) screen.height-屏幕高度（包含整个屏幕，如电脑的大小是

1.8K3 0

js获取屏幕大小，当前网页和浏览器窗口

jQuery 如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小： $(window).height(); // returns height of browser...对于屏幕大小你可以使用以下代码实现： screen.height; screen.width; 1.获取屏幕尺寸获取屏幕宽度：window.screen.width; //整个屏幕的宽度获取屏幕高度.../ document.documentElement.scrollLeft 二、JQ部分 1、获取当前窗口浏览器宽高获取当前窗口浏览器可视区域宽度：$(window).width(); 获取当前窗口浏览器可视区域高度...：$(window).height(); 2、获取当前窗口文档高宽获取当前窗口文档宽度：$(document).width(); 获取当前窗口文档高度：$(document).height(); 3、...获取当前窗口body高宽获取body宽度：$(document.body).width(); 获取body高度：$(document.body).height();

11.4K2 0

js获取屏幕大小，当前网页和浏览器窗口

jQuery 如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小： /** * 时间：2019年8月18日 * 前端教程： https://www.pipipi.net...viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 屏幕大小...对于屏幕大小你可以使用以下代码实现： /** * 时间：2019年8月18日 * 前端教程： https://www.pipipi.net/ */ screen.height; screen.width

5.9K4 0

jquery 绑定事件 - resize() 浏览器窗口的大小发生改变

进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变...scroll() 滚动条的位置发生变化 submit() 用户递交表单 resize() 浏览器窗口的大小发生改变其实大部分resize()方法是用于响应式布局调整屏幕大小的时候进行触发处理的。...这里就不写那么复杂的事情，只写一下当浏览器窗口变化的时候，触发resize()事件看看。...编写一个当浏览器窗口大小发生变换，在document.title打印document.width()如下： ? ? 代码 $(function(){

2.5K2 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下...document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小...，并且，其数值会随窗口大小的改变而变化。...（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

8.1K3 0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body...document.body.clientHeight)) winHeight = document.body.clientHeight; // 通过深入 Document 内部对 body 进行检测，获取窗口大小...winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } 详细: 关于获取各种浏览器可见窗口大小...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

7.1K2 0

Jquery 使用getJSON 获取json数据

Jquery Jquery 使用getJSON 获取json数据 1.先引用jq获取下载到本地 CDN地址：https://code.jquery.com/jquery-latest.js {"code...":200,"hitokoto":"\u6b32\u901f\u5219\u4e0d\u8fbe"} //json代码 //通过$.getJSON(url,function)获取json数据 let...code=json',function(date){ //如果想获取json里面hitokoto的值,可以直接用 date.hitokoto； document.write(date.hitokoto)...; }); 更多文档：https://www.jquery123.com/jQuery.getJSON/ 本文由 Alone88 创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载

3.5K1 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下...&& (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小...，并且，其数值会随窗口大小的改变而变化。...（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

16.1K1 0

使用 jQuery 在新窗口打开外部链接

我们一般都希望在新窗口打开外部链接，这样用户就不需要离开网站就能访问外部链接，但是如果每个外部链接都手工加上新窗口打开的属性（target="_blank"）的话，会让人非常抓狂。...使用 jQuery，我们只需要几行代码就能在新窗口中打开外部链接。 1....这样我们就不会获取任何相对路径或者绝对连接中含有当前域名的内部连接。 2....not([href*='"+location.hostname+"'])") .addClass("external"); 上面的代码给外部链接加上一个 “external” Class ，这样就可以使用...让外部链接在新窗口打开如果你想外部链接在新窗口打开，继续增加如下一行代码： $("a[href*='http://']:not([href*='"+location.hostname+"']),[href

2.6K2 0

在不同浏览器都实用的各窗口大小获取方法

// 浏览器窗口 var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight...|| document.body.clientHeight; // 网页窗口 var w=document.documentElement.scrollWidth || document.body.scrollWidth...; var h=document.documentElement.scrollHeight || document.body.scrollHeight; // 网页窗口(包括滚动条等边线，会随窗口的显示大小改变

1.4K8 0

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

测试环境 JQuery-3.2.1.min.js 下载地址： https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js...需求场景1 实现需求：如下图，点击左侧的导航，打开对应tab页面，其中tab页面的内容为 iframe，这里希望iframe的高度和宽度，根据浏览器窗口大小变化而变化，同时页面内容过多，或者过宽时，出现...iframe.height = h - offsetTop; // 这里 offsetTop可以替换成一个比较合理的常量值 }); } 说明： window.innerHeight 获取浏览器窗口的高度.../** * 浏览器窗口大小发生变化时，自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时，会发生多次resize事件，导致频繁调用changeFrameHeight() */ $(...当调整浏览器窗口的大小时，发生 resize 事件。

6.7K2 0

如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】

在浏览网页最常见的就是浏览器的窗口产生的事件，比如浏览器大小变化时发生的resize事件；浏览器滚动条变化时发生的scroll事件。...这些事件在浏览器窗口比较直观，但实际上这两种情况也可以发生在html元素的某个节点上。本节以较为直观的浏览器窗口事件为例来说明jQuery中窗口事件的使用。案例源代码： <!...中的scroll事件是当滚轮出现时，用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生的事件。...图5-23提示效果而用户的浏览器大小发生变化时就会触发预先绑定在window上面的resize事件，这个事件可以将当前的浏览器内部的宽高实时输出到id为ctsize的容器里面。...当在使用resize事件的时候，要注意检测浏览器窗口要将节点绑定到window上，而不是document节点。当使用scroll滚动事件的时候，绑定事件的容器要有滚动条变化才会发生。

821 0

JQuery 获取元素到浏览器可视窗口边缘的距离

测试环境 JQuery-3.2.1.min.js 下载地址： https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js...需求场景实现需求：如下，获取tab标签页到页面底端的距离前提：tab标签元素自身不携带滚动条 3....--通过js获取 tab对应的页面内容--> <iframe name...scrollHieght = $(document).scrollTop(); // 滚动条高度 var windownHeight = $(window).height(); //浏览器可视窗口的高度...; } 注意：当改变浏览器窗口高度时，$(window).height() 会随之动态改变 5.

2.8K2 0

Python使用鼠标滚轮调整tkinter应用程序窗口大小

功能描述：继续昨天的异形窗口案例，详见 Python使用tkinter设计任意形状的窗口在此基础上修改和增加代码，通过鼠标滚轮调整窗口大小，对小猪窗口进行缩放，鼠标放在小猪窗口上，向上滚动时放大

2.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用jQuery连续获取窗口大小

基础概念

相关优势

类型

应用场景

示例代码

参考链接

常见问题及解决方法

问题：为什么窗口大小变化时，更新不及时？

问题：为什么获取到的窗口大小不准确？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐