scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变

JQuery中：

width()方法用于获得元素宽度；

innerWidth()方法用于获得包括内边界（padding）的元素宽度；

outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度；

如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);

JS中：

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

------------------------------------------------------------------
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight  (包括边线的宽);

----------------------------------------------------------------

scrollHeight和scrollWidth，获取网页内容高度和宽度：
网页正文全文宽： 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;

1、offsetWidth width+padding+border)

当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

区别：1)style.width返回值除了数字外还带有单位px；

2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，

style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；

3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；

2、offsetHeight :(Height+padding+border)

当前对象的高度。

style.height也是当前对象的高度(height+padding+border)。

区别：1)style.height返回值除了数字外还带有单位px；

2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮，

style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值；

3)如果没有给 HTML 元素指定过 height样式，则 style.height返回的是空字符串；

3、offsetLeft :

当前对象到其上级层左边的距离。

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。

style.left当前对象到其上级层左边的距离。

区别：1)style.left返回值除了数字外还带有单位px；

2)如对象到其上级层左边的距离设定值为百分比，

style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；

3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；

4、offsetTop :

当前对象到其上级层顶部边的距离。

不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。

style.top当前对象到其上级层顶部边的距离。

区别：1)style.top返回值除了数字外还带有单位px；

2)如对象到其上级层顶部边的距离设定值为百分比，

style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；

3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；

注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

IE   1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；

2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder；

这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？

FF  上述两种情况：offsetTop=margin+padding ;

(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13

5、scrollWidth:获取对象的滚动宽度 。

6、scrollHeight: 获取对象的滚动高度。

7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)

8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)

9、clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；

10、clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；

11、clientLeft: 获取对象的border宽度

12、clientTop：获取对象的border高度

13、offsetParent :当前对象的上级层对象.

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

以上属性测试的文档类型为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果不写文档类型，浏览器就会按照 HTML 4.0 的方式来处理，则效果可能不同。

 1 //outerWidth();//jquery中的方法；

 2

 3 //offsetWidth js属性，是获取不到隐藏元素的值；就是说对于display：none；的获取不到；

 4

 5 $(function(){

 6

 7     //alert( $('#div1').get(0).offsetWidth );

 8

 9     alert( $('#div1').outerWidth() );

10

11 });

来自：http://www.cnblogs.com/Aaron-dzl/p/5813182.html

javascript-网页尺寸的更多相关文章

  1. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  2. 《JavaScript网页特效经典300例》

    <JavaScript网页特效经典300例> 基本信息 作者: 杨磊    张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...

  3. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  4. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  5. 《JavaScript网页特效经典300例-进阶篇》

    <Javascript网页经典特性300例> 进阶篇 第11章:导航菜单特效 二级导航菜单三级导航菜单动态加载导航菜单三级联动导航菜单树形导航菜单当网页超过一屏时导航菜单始终置顶 第12章 ...

  6. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

  7. Javascript网页特效开发技巧

    Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...

  8. 7款Flash和Javascript网页视频播放器

    Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多……. 也许你 ...

  9. 网页尺寸offsetHeight,offsetWidth

    网页尺寸offsetHeight offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变). 一.值 offsetHeight = clie ...

  10. 网页尺寸scrollHeight

    http://www.imooc.com/code/1703 网页尺寸scrollHeight scrollHeight和scrollWidth,获取网页内容高度和宽度. 一.针对IE.Opera: ...

随机推荐

  1. 不可被忽视的操作系统（ FreeRTOS ）【1】

    把大多数人每个星期的双休过过成了奢侈的节假日放假,把每天23点后定义为自己的自由时间,应该如何去思考这个问题 ? 双休的两天里,不!是放假的两天里,终于有较长的时间好好的学习一下一直断断续续的Free ...

  2. win10配置易用命令行

    在 win10 下配置易用命令行 win10 相比 Linux 最大的短板之一是命令行. 这篇文章不会将 win10 配置到像Linux那样一行命令解决所有包的安装,只是从最大程度上方便开发. 我们主 ...

  3. Java的多线程1：线程的使用

    概述 进程是线程的容器,线程共享进程的内存空间,所以线程之间彼此通信是比较容易的,而线程又有自己私有的内存地址,其他线程无法访问.了解进程和线程关系,可以看我另一篇博客<进程与线程> Ja ...

  4. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  5. 1089 Insert or Merge (25分)

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  6. 区分C++和Java的this

    区分C++和Java的this 今天早上写C++程序的时候,我习惯性地在程序中写了如下代码 void setY(int x){ this.x = x; } 编译器给我无情地报错了.后来想想,发现是自己 ...

  7. 写一个TODO App学习Flutter本地存储工具Moor

    写一个TODO App学习Flutter本地存储工具Moor Flutter的数据库存储, 官方文档: https://flutter.dev/docs/cookbook/persistence/sq ...

  8. UC接口文档

    UC接口文档 一.功能描述 提供同步登录.退出.注册等相关接口,可以实现用户一个账号,在一处登录,全站通行. 二.测试环境UC地址 http://s1.p5w.net/uc/ 三.相关接口 UC_AP ...

  9. P4015 运输问题【zkw费用流】

    输入输出样例 输入 #1复制 2 3 220 280 170 120 210 77 39 105 150 186 122 输出 #1复制 48500 69140zuixiaofeiyo 说明/提示 1 ...

  10. Array（数组）对象-->pop() 方法

    1.定义和用法 pop() 方法用于删除数组的最后一个元素并返回删除的元素. 语法: array.pop() 注意:此方法改变数组的长度! 举例: var arr = [1,2,3,4,5]; con ...