Javascript:

IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

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

<!DOCTYPE html>

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>

<html>

  <head>

    <title>aaa</title>

  </head>

  <body>

<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaa</h1>

    <p>Welcome to aaa</p>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

<h1>aaa</h1>

  </body>

</html>

<script type="text/javascript">

alert(document.body.clientWidth);

alert(document.body.clientHeight);

alert(document.body.offsetWidth);

alert(document.body.offsetHeight);

alert(document.body.scrollWidth);

alert(document.body.scrollHeight);

alert(document.body.scrollTop);

alert(document.body.scrollLeft);

alert(window.screenTop);

alert(window.screenLeft);

alert(window.screen.height);

alert(window.screen.width);

alert(window.screen.availHeight);

alert(window.screen.availWidth);

//alert($(document).height());

//alert($(document).width());

</script>

　　

Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]的更多相关文章

  1. Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用

    <js篇> Javascript获取浏览器和屏幕各种高度宽度方法总结 document.body.clientWidth       //网页可见区域宽(body) document.bo ...

  2. Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）

    Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见    http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...

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

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

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

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

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

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

  6. C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  7. Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度

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

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

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

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

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

随机推荐

  1. ASP.NET Core 中使用 GrayLog 记录日志

    使用 UDP 协议发送日志 自定义好的查询 key 存储数据,尽量不要使用 graylog2-server 服务端格式化日志再存储 Ubuntu 安装服务端 sudo apt-get update & ...

  2. php -- 配置与安装

    1.php与apache安装路径 2.安装Apache服务 httpd -k install 开启关闭重启服务 http -k start/stop/restart 3.php.ini-develop ...

  3. node爬虫gbk中文乱码问题

    刚入坑node 写第二个node爬虫时,遇到了这个坑,记录一下. 主要步骤: 1.安装iconv-lite 输入npm install iconv-lite 2.将接收到的网页源码以二进制的方式存储下 ...

  4. 堆与堆排序/Heap&Heap sort

    最近在自学算法导论,看到堆排序这一章,来做一下笔记.堆排序是一种时间复杂度为O(lgn)的原址排序算法.它使用了一种叫做堆的数据结构.堆排序具有空间原址性,即指任何时候都需要常数个额外的元素空间存储临 ...

  5. Java NIO 基础知识

    前言 前言部分是科普,读者可自行选择是否阅读这部分内容. 为什么我们需要关心 NIO?我想很多业务猿都会有这个疑问. 我在工作的前两年对这个问题也很不解,因为那个时候我认为自己已经非常熟悉 IO 操作 ...

  6. Windows Live Writer 2012离线发布WP文章教程

    1. WLW简介 Windows Live Writer是一款微软开发的文章离线发布软件,对博客文章的排版类似Word操作,比普通的HTML编辑器更强大的是其离线发布功能.支持新浪博客.网易博客.博客 ...

  7. laravel 文件上传

    laravel 文件上传 先开扩展 表单中能够选择图片 数据处理C层, 接图片并保存 保存图片: 设置目录 store()的第一个参数说明: 存放图片的子目录. 如何获取文件的类型 大小: $uplo ...

  8. 微信开发（一）基于Wx-java的微信分享功能

    最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...

  9. C++中的 CONST 含义（从#define 到 CONST 的转变）

    const 与define 两者都可以用来定义常量,但是const定义时,定义了常量的类型,所以更精确一些.#define只是简单的文本替换,除了可以定义常量外,还可以用来定义一些简单的函数,有点类似 ...

  10. Stack源码解析

    我们从一个DEMO作为入口,了解Java的Stack的源码,代码如: Stack<String> stack = new Stack<>(); stack.push(" ...