javascript-网页尺寸
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-网页尺寸的更多相关文章
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- 《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息 作者: 杨磊 张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
- 《JavaScript网页经典特效300例》
<JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇
- 《Javascript网页经典特性300例》
<Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...
- 《JavaScript网页特效经典300例-进阶篇》
<Javascript网页经典特性300例> 进阶篇 第11章:导航菜单特效 二级导航菜单三级导航菜单动态加载导航菜单三级联动导航菜单树形导航菜单当网页超过一屏时导航菜单始终置顶 第12章 ...
- 《JavaScript网页特效经典300例-高级篇》
<Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...
- Javascript网页特效开发技巧
Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...
- 7款Flash和Javascript网页视频播放器
Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多……. 也许你 ...
- 网页尺寸offsetHeight,offsetWidth
网页尺寸offsetHeight offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变). 一.值 offsetHeight = clie ...
- 网页尺寸scrollHeight
http://www.imooc.com/code/1703 网页尺寸scrollHeight scrollHeight和scrollWidth,获取网页内容高度和宽度. 一.针对IE.Opera: ...
随机推荐
- 线程状态以及sleep yield wait join方法
前言 在日常的开发过程中,我们通过会使用Thread.sleep模拟一个耗时的任务执行过程. 在深入理解这四个方法之前,首先对线程的状态进行理解阐述. 线程概念 线程是操作系统执行任务的基本单位,处理 ...
- 了解PCI Express的Posted传输与Non-Posted传输
0.写在前面 本文首发于公众号[两猿社],后续将在公众号内持续更新~ 其实算下来接触PCIe很久了,但是由于之前换工作,一直没有系统的学习和练手项目,现在新项目买了Synopsys的PCIe IP,总 ...
- warning: directory not found for option“XXXXXX” 解决方案
从项目中删除了某个目录.文件以后,编译出现警告信息: ld: warning: directory not found for option"XXXXXX" 很奇怪,为什么已经 ...
- 如何做监控？Google SRE 解密
监控值班室: @隔壁老王头 SQL执行耗时时间过长,达到了报警阈值[5000ms] 隔壁老王头: @监控值班室 少量报警请忽略,批量关注即可. 监控值班室: @隔壁老王头 订单号[88886666]状 ...
- Redis 笔记（四）—— SET 常用命令
常用命令 命令 用例和描述 SADD SADD key item [item ...] —— 将一个或多个元素添加到集合中,返回添加的数量 SREM SREM key item [item ...] ...
- 【STM32项目笔记】STM32CubeMX+Keil+Proteus联合实现LED闪烁
摘要 利用STM32CubeMx配置STM32芯片的功能,然后将配置后的内容生成代码,并导出成可以使用Keil打开编辑的文件,在Keil中添加控制代码后,下载到Proteus仿真中,使用仿真观察代码执 ...
- 计算机人推荐书目&网站（不断更新）
计算机人推荐书目&网站(不断更新) 鉴于最近有很多同学问我学什么读什么书好,我把我自己的经历和愚见写下来,仅供参考.我只会写我亲自读过有感悟的书,而不会搬运一些我碰都没有碰过只闻大名的书.本人 ...
- 下载安装配置 Spark-2.4.5 以及 sbt1.3.8 打包程序
文章更新于:2020-03-29 按照惯例,文件附上链接放在文首. 文件名:spark-2.4.5-bin-without-hadoop.tgz 文件大小:159 MB 下载链接:https://mi ...
- spring jar 包 用处功能：
自己积累的: @ spring-context-3.0.5.RELEASE.jar :主要用于 spring程序中加载类 ApplicationContext 用.eq: ApplicationC ...
- 数据结构和算法(Golang实现)(15)常见数据结构-列表
列表 一.列表 List 我们又经常听到列表 List数据结构,其实这只是更宏观的统称,表示存放数据的队列. 列表List:存放数据,数据按顺序排列,可以依次入队和出队,有序号关系,可以取出某序号的数 ...