JQuery获取浏览器窗口宽高,文档宽高

2010-01-20 08:59
<script type="text/javascript">
$(document).ready(function()        
         {
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
}
         )
</script>

js

<script language="javascript">
function screenInfo(){
    var  s = "";
   s += "rn网页可见区域宽:"+ document.body.clientWidth;
   s += "rn网页可见区域高:"+ document.body.clientHeight;
   s += "rn网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "rn网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
   s += "rn网页正文全文宽:"+ document.body.scrollWidth;
   s += "rn网页正文全文高:"+ document.body.scrollHeight;
   s += "rn网页被卷去的高:"+ document.body.scrollTop;
   s += "rn网页被卷去的左:"+ document.body.scrollLeft;
   s += "rn网页正文部分上:"+ window.screenTop;
   s += "rn网页正文部分左:"+ window.screenLeft;
   s += "rn屏幕分辨率的高:"+ window.screen.height;
   s += "rn屏幕分辨率的宽:"+ window.screen.width;
   s += "rn屏幕可用工作区高度:"+ window.screen.availHeight;
   s += "rn屏幕可用工作区宽度:"+ window.screen.availWidth;
   alert(s);
}
</script>

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

实例

//js获取当前窗口的宽度高度。获取窗口尺寸

WE.getWndSize = function() {

var w = 0, h = 0;

if (window.innerWidth && window.innerHeight) {

w = window.innerWidth;

h = window.innerHeight;

} else if (document.documentElement) {

w = document.documentElement.clientWidth;

h = document.documentElement.clientHeight;

} else if (document.body.clientWidth && document.body.clientHeight) {

w = document.body.clientWidth;

h = document.body.clientHeight;

}

return { width: w, height: h };

}

[转]js和jquery获取窗体高度的更多相关文章

  1. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  2. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  4. JS和Jquery获取和修改label的值的示例代码

    abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源:  <  JS和Jquery获取和修改label的值的示例代码  & ...

  5. js和jQuery获取各种屏幕或文档的高度和宽度

    1.jQuery获取文档或屏幕的高度 console.log($(window).height());//浏览器页面当前屏幕可见区域的高度 console.log($(document).height ...

  6. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  7. js,jquery 获取滚动条高度和位置, 元素距顶部距离

    一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height();  获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...

  8. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

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

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

随机推荐

  1. [Postgres]Postgres单用户模式执行VACUUM

    # su - postgres $ /usr/local/pgsql/bin/postgres --single -D /usr/local/pgsql/data [不能VACUUM的数据库] Pos ...

  2. EF6使用Mysql的一些问题(code first)

    首先,添加nuget Mysql.Data ; Mysql.Data.Entity ; 添加配置文件connectionStrings <add name="conn" co ...

  3. linux杀进程

    1.Linux杀进程的一个例子 (1)查看进程:ps -ef | grep 进程名 (2)杀进程:kill -9 进程名或者进程号 例如:杀tomcat的进程 (1)ps -ef | grep tom ...

  4. [Objective-C语言教程]数字(13)

    在Objective-C编程语言中,要以对象形式保存基本数据类型,如:int,float,bool.Objective-C提供了一系列与NSNumber一起使用的方法,一些常用重要的方法列在下表中. ...

  5. POJ3349 Snowflake Snow Snowflakes (JAVA)

    首先声明代码并没有AC,内存超了 但我对此无能为力,有没有哪位大神好心教一下怎么写 哈希,然后比较花瓣数组,这些应该都没问题才对..唉.. 贴MLE代码 import java.util.*; pub ...

  6. 基于VS快速排序的单元测试

    1.选择开发工具 1.1由于Visual stdio 已经安装,所以运行界面如下图所示: 2.进行单元测试 2.1用Visual stdio 2017创建一个新项目(快速排序)如下图所示: 其中程序如 ...

  7. next_permutation(全排列)

    废话不多说,直接上代码,谁测试,谁知道 C++: #include<bits/stdc++.h> using namespace std; typedef long long ll; in ...

  8. php7 中?? 和 ?:的区别

    $b = $a?? $c ;相当于$b= isset($a)?$a:$c; $b = $a?: $c ;则是 $b = !empty($a) ? $a:$c;

  9. [转] Centos 系统swap虚拟内存添加与删除配置

    [From]https://blog.csdn.net/lengyue1084/article/details/51405640 [From]https://yuukis.cn/24/ SWAP是Li ...

  10. iis上部署本地数据库LocalDB的方法

    1. iis应用程序池的标识设置为"ApplicationPoolIdentify"(比较安全) 2. 不要将数据库物理文件保存在网站的物理路径内,因为iis应用程序池的标识为Ap ...