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 };

}

转载于:https://www.cnblogs.com/wuchao/p/3173887.html

[转]js和jquery获取窗体高度相关推荐

  1. dom元素滚动条高度 js_js,jquery 获取滚动条高度和位置, 元素距顶部距离

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

  2. js与jquery获取子节点、父节点、兄弟节点的方法

    js与jquery获取子节点.父节点.兄弟节点的方法 在写代码时,时不时会遇到获取子节点.父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js方 ...

  3. 如何通过js获取html文本框中的值,js与jquery获取input输入框中的值实例讲解

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  4. js和jQuery获取浏览器窗口的高度、宽度的方法详解

    有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.inn ...

  5. JS和Jquery获取和修改label的值

    获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: var label=document.getElementById("id"); va ...

  6. js和jquery获取父级元素、子级元素、兄弟元素的方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS ...

  7. 原生js或者jquery获取父级元素/同级元素/下级元素

    1.js获取 var s= document.getElementByIdx_x("test"); var chils= s.childNodes;  //得到s的全部子节点 va ...

  8. jquery获取html页面参数乱码,JS或Jquery获取浏览器URL的参数值 汉字值乱码 并转码...

    1.获取url很简单,代码如下:window.location.href; 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情 首先看看单纯的通 ...

  9. js 获取td高度_JS或jQuery获取宽高度

    javascript //网页可见区域宽: document.body.clientWidth //网页可见区域高: document.body.clientHeight //网页可见区域宽: doc ...

  10. js,jquery获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

最新文章

  1. drep:微生物基因组快速去冗余-文章解读+帮助文档+实战教程
  2. Multithreading in Java
  3. VS 中配置使用Visual SVN系列 五:SVN Client的配置和使用
  4. 《CLR via C#》之线程处理——线程基础
  5. 计算机与操作系统基础小结
  6. leetcode1025. 除数博弈(dp/数学)
  7. 匈牙利算法 KM算法
  8. 配置catalina.out的日志格式
  9. 破土Plan遇到的keng
  10. Tesseract Ocr文字识别实战(新版本,扩展手写文字识别)
  11. VPN入门教程:基本概念、使用方法及思科模拟器实践
  12. Python3《机器学习实战》学习笔记(三):决策树实战篇
  13. evo评测VINS-MONO---代码修改、数据格式转换、数据测试
  14. 运算符 相与、相或、相异或、取反、左移、右移
  15. 分类算法—ROC指标应用
  16. css外边距自动代码,CSS外边距合并代码
  17. JAVA使用easyExcel
  18. 2020橙瓜网络文学行业报告:行业大变局之下的新机遇
  19. nlohmann/json 的用法示例
  20. Qsan iSCSI存储产品通过VMware 认证

热门文章

  1. ubuntu 14.04/14.10 iptables 防火墙设置
  2. Nginx 在 Linux 下安装与搭建 Tomcat 集群
  3. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_1.页面发布-需求分析...
  4. 小D课堂 - 新版本微服务springcloud+Docker教程_5-02 Netflix开源组件断路器
  5. 阶段3 1.Mybatis_08.动态SQL_03.mybatis中动态sql语句-foreach和sql标签
  6. spidev 驱动 probe 获取 dts 节点参数
  7. 【html】非配对的标签
  8. C# ComBox 垂直滚动条
  9. java对【配置文件的读取】与【读配置文件时的路径问题】代码总结
  10. viewport原理和使用和设置移动端自适应的方法(移动适应电脑)