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. C#高级特性:动态绑定

    C#高级特性:动态绑定 动态绑定 动态绑定将类型绑定(类型解析.成员和操作过程)从编译时推迟到了运行时.在编译时,如果程序员知道某个特定函数.成员的存在而编译器不知道,那么这种操作是非常有用的,这种情 ...

  2. TestNG+Selenium

    是一个开源自动化测试框架.其实类似于JUnit这种单元测试框架,但进行了一些功能扩展 属于selenium?还是说TestNG是一个测试框架,它用到了selenium的web自动化测试的功能,比如使用 ...

  3. Redis!

    在安装redis完成时,使用windows管理redis工具时(例如RedisDesktopManager)时出现连接不上的问题时 ping一下你的ip 和 talnet ip  看看通不通. 如果不 ...

  4. 【连载】redis库存操作,分布式锁的四种实现方式[三]--基于Redis watch机制实现分布式锁

    一.redis的事务介绍 1. Redis保证一个事务中的所有命令要么都执行,要么都不执行.如果在发送EXEC命令前客户端断线了,则Redis会清空事务队列,事务中的所有命令都不会执行.而一旦客户端发 ...

  5. Android 增量更新研究

    Android 增量更新实例(Smart App Updates) http://blog.csdn.net/duguang77/article/details/17676797 Android AP ...

  6. jquery函数封装

    <script type="text/javascript"> $(function () { $("#tabMenu a").on('click' ...

  7. js计算机样式window.getComputedStyle(ele,null)2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue数据响应的坑

    1.首先遇到的第一个坑是数组 vue初始化时,data是一个数组并且为空的时候,里面有一些对象元素,直接改变这些对象的的属性不会触发视图更新 解决办法,copy一个新的数组(vue.assign是浅c ...

  9. 2019 HEOI游记(真-退役记)

    \(\color{#00ffff}{DAY \ \ -1}\) 下午又在说无聊的注意事项,有点紧张,不想做题,只想水题233333 晚上就水了几道网络流,晚四透彻依旧,yhzr二连胜,心里倒是放松了不 ...

  10. POJ-3126-Prime Path(BFS)

    Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27852   Accepted: 15204 Desc ...