[转]js和jquery获取窗体高度
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 marginalert($(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获取窗体高度的更多相关文章
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- JS和Jquery获取和修改label的值的示例代码
abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源: < JS和Jquery获取和修改label的值的示例代码 & ...
- js和jQuery获取各种屏幕或文档的高度和宽度
1.jQuery获取文档或屏幕的高度 console.log($(window).height());//浏览器页面当前屏幕可见区域的高度 console.log($(document).height ...
- JS、JQUERY 获取浏览器和屏幕各种高度宽度
好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...
- js,jquery 获取滚动条高度和位置, 元素距顶部距离
一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height(); 获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
随机推荐
- [Windows] IIS6 部署ISAPI
环境: OS:Windows Server 2003 Enterprise sp2 34位 IIS:6.0 ISAPI: delphi xe 编译的webbroker isapi dll 32位 ( ...
- [转]一次Delete&Insert引发的Mysql死锁
近日遇到一个比较奇怪的deadlock错误, 错误详情: Deadlock found when trying to get lock; try restarting transaction; nes ...
- Partition--分区切换
现有数据表[dbo].[staging_TB1_20131018-104722]和分区表[dbo].[TB1],需要将分区表和数据表中做数据交换 CREATE TABLE [dbo].[staging ...
- eclipse 创建maven
下载地址自行搜索关键字:“eclipse官网”即可,注意下版本,32bit or 64bit. maven插件以及svn等相关插件安装设置问题不在这里赘述,有时间的话会发布出来. 在这里说一下,第一. ...
- windows系统作为客户端时,linux中本地yum源挂载时,如何同时挂载DVD1和DVD2?
这里以CentOS6.5为例.他的镜像有两个DVD1和DVD2.DVD1中是系统和主要的安装包,DVD2中是剩下的安装包 当挂载时如果要同时挂载DVD1和DVD2.需要这样做: 1)在虚拟机的设置中选 ...
- 用 gdb 和 qemu 调试 grub
因为qemu内置了gdbserver,所以我们可以用gdb调试qemu虚拟机上执行的代码,而且不受客户机系统限制. 以下内容是我调试 grub 0.97 时的一份笔记. 准备 qemu, gdb,以及 ...
- 某个js插件没有执行
今天遇到一个奇怪的问题,bootstrap-table插件根本没有执行.后来发现用于执行bootstrap启动的js文件出错.导致这个不能顺利执行错误js中的程序.一般导致插件不能顺利执行有两个原因. ...
- eclipse项目目录展示结构设置
我因为前后端都搞过, 解除过很多的开发IDE,说真的,很多的项目目录结构都是一级一级分开,然后我可以通过展开等操作来查看文件等资源信息,结果呢?java的开发IDE eclipse默认的项目目录展示简 ...
- CDH6安装文档
1.准备工作 1.1 环境 centos7.jdk8.mysql5.7.python2.7.CDH6 1.2文件下载 1.2.1 cloudmanger地址 https://archive.cloud ...
- thinkphp5.0升级
之前一些项目是thinkphp5.0的版本.这个版本是有严重漏洞的.根据官方建议会把Request.php下面的 method方法做一个替换.但是实际上为了安全最好是做一个升级.首先必须要先做一个备份 ...