`

Javascript、Jquery获取浏览器和屏幕各种高度宽度

阅读更多

Javascript:

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

 

Jquery

alert($(window).height());                           //浏览器当前窗口可视区域高度

alert($(document).height());                        //浏览器当前窗口文档的高度

alert($(document.body).height());                //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width());                            //浏览器当前窗口可视区域宽度

alert($(document).width());                        //浏览器当前窗口文档对象宽度

alert($(document.body).width());                //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

 

复制代码
 1 <!DOCTYPE html>
 2 <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
 3 <html>
 4   <head>
 5     <title>aaa</title>
 6   </head>
 7   <body>
 8 <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 9 aaaaaaaaaaaaaaaaaa</h1>
10     <p>Welcome to aaa</p>
11 <h1>aaa</h1>
12 <h1>aaa</h1>
13 <h1>aaa</h1>
14 <h1>aaa</h1>
15 <h1>aaa</h1>
16 <h1>aaa</h1>
17 <h1>aaa</h1>
18 <h1>aaa</h1>
19 <h1>aaa</h1>
20 <h1>aaa</h1>
21 <h1>aaa</h1>
22 <h1>aaa</h1>
23 <h1>aaa</h1>
24   </body>
25 </html>
26 
27 <script type="text/javascript">
28 alert(document.body.clientWidth);
29 alert(document.body.clientHeight);
30 alert(document.body.offsetWidth);
31 alert(document.body.offsetHeight);
32 
33 alert(document.body.scrollWidth);
34 alert(document.body.scrollHeight);
35 
36 alert(document.body.scrollTop);
37 alert(document.body.scrollLeft);
38 alert(window.screenTop);
39 alert(window.screenLeft);
40 alert(window.screen.height);
41 alert(window.screen.width);
42 alert(window.screen.availHeight);
43 alert(window.screen.availWidth);
44 
45 //alert($(document).height()); 
46 //alert($(document).width());
47 </script>
分享到:
评论

相关推荐

    jQuery 获取屏幕高度和宽度

    本文将详细讲解如何使用jQuery获取屏幕的高度和宽度,这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先,我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸,而...

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

    ### JS与jQuery获取屏幕宽度和高度的相关知识点 在前端开发中,经常需要获取用户的屏幕尺寸信息,例如宽度和高度等,这些数据对于响应式设计、布局调整等方面具有重要作用。通过JavaScript(简称JS)和jQuery这两种...

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    js获取浏览器高度和宽度值(多浏览器)

    例如,可以编写一个函数,根据浏览器类型选择合适的获取高度和宽度的方法。同时,随着现代浏览器对Web标准的支持逐渐增强,使用CSS3的`resize`事件和`window.innerWidth`、`window.innerHeight`等属性也能更方便地...

    JQuery获取浏览器窗口内容部分高度的代码

    总之,JQuery提供了一套简洁且功能强大的API来帮助开发者更容易地操作DOM和进行浏览器环境交互,$(window).height()和$(document).height()正是其中的两个方法,它们能够帮助我们获取浏览器窗口的视口高度以及整个...

    JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

    在JavaScript中,获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求,这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见...

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    通常情况下,如果需要使用jQuery框架来实现相关功能,可以利用jQuery提供的尺寸获取方法,如$(window).height()和$(window).width()来获取浏览器窗口的可视区域高度和宽度。$(document).height()和$(document).width...

    jquery实现动态改变div宽度和高度

    这两个方法都允许我们获取或设置元素的宽度和高度。当我们传递一个参数给这两个方法时,它会设置元素的尺寸;而如果没有传递参数,它则会返回当前元素的宽度或高度。 在文章中提供的HTML代码中,我们定义了一个div...

    JQuery获取当前屏幕的高度宽度的实现代码

    在网页开发中,有时我们需要获取用户的屏幕或者浏览器窗口的高度和宽度来实现自适应布局或者特定的交互效果。jQuery提供了一套简洁的API来帮助我们轻松地获取这些信息。以下是对标题"JQuery获取当前屏幕的高度宽度的...

    jQuery获取浏览器中的分辨率实现代码

    总结起来,通过jQuery和JavaScript,我们可以轻松地获取浏览器窗口、文档以及屏幕的各种尺寸信息,从而更好地优化网页布局,确保在各种设备和分辨率下都能提供良好的用户体验。理解并熟练运用这些方法是现代Web开发...

    【Jquery经典特效18】jQuery自适应宽度跟高度相册代码

    在本文中,我们将深入探讨如何使用jQuery实现一个自适应宽度和高度的相册代码,这是Jquery经典特效系列中的第18个主题。这个特效对于现代网页设计至关重要,因为它允许图片展示在不同屏幕尺寸和设备上都能保持良好的...

    jQuery自适应浏览器宽度幻灯片.zip

    【jQuery自适应浏览器宽度幻灯片】是一种常见的网页动态效果,用于在网页上展示一系列图片或内容,通过自动切换或用户交互来呈现不同的幻灯片。这种效果在现代网页设计中广泛使用,能够吸引用户的注意力并提升用户...

    jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果

    总的来说,通过jQuery和自适应设计的原理,我们可以创建出一个在不同设备和屏幕尺寸上都能良好显示的网页,其中文本大小能根据浏览器窗口的变化自动适配,提供优秀的阅读体验。在实际开发中,开发者应结合HTML、CSS...

    解决jQuery动态获取手机屏幕高和宽的问题

    本文将深入探讨如何使用jQuery有效地获取手机屏幕的宽度和高度,并解决可能出现的问题。 首先,jQuery提供了`$(window).height()`和`$(window).width()`这两个方法来获取当前窗口(包括滚动条)的可视区域高度和...

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

    在网页开发中,获取屏幕、窗口以及网页内容的宽度和高度是常见的需求,这有助于我们进行响应式设计或者实现特定的交互效果。本篇将详细解释JavaScript和jQuery中获取这些尺寸的方法。 首先,我们来看看JavaScript...

    jQuery自适应浏览器宽度响应式表格插件basictable.zip

    《jQuery自适应浏览器宽度响应式表格插件basictable》 在现代网页设计中,响应式布局已经成为一种标准,确保网站在不同设备上都能提供良好的用户体验。jQuery作为一款广泛使用的JavaScript库,为开发者提供了丰富的...

    jquery检测屏幕宽度并自动添加class

    在检测屏幕宽度时,jQuery使用`$(window).width()`方法,该方法返回当前浏览器窗口的宽度。这个值包括滚动条,如果存在的话。例如,你可以这样获取屏幕宽度: ```javascript var screenWidth = $(window).width(); ...

Global site tag (gtag.js) - Google Analytics