JavaScript--DOM浏览器窗口可视区域大小
浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
网页卷去的距离与偏移量
我们先来看看下面的图：
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
JavaScript--DOM浏览器窗口可视区域大小的更多相关文章
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- js获取浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight - 浏 ...
- javascript中求浏览器窗口可视区域兼容性写法
1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:• window.innerHeight - 浏览器窗口的内部高度• window. ...
- Android获取窗口可视区域大小: getWindowVisibleDisplayFrame()
getWindowVisibleDisplayFrame()方法 getWindowVisibleDisplayFrame()是View类下的一个方法,从方法的名字就可以看出,它是用来获取当前窗口可视 ...
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- 第51天：封装可视区域大小函数client
一.client 可视区域 offsetWidth: width + padding + border (披着羊皮的狼) clientWidth: width + ...
- AS3舞台的大小，可视区域大小及SWF文件的原始尺寸大小
AS3舞台的大小,可视区域大小及SWF文件的原始尺寸大小三者之间没有什么关系. 当前可视区域:stage.stageWidth,stage.stageHeight.SWF文件编译后的原始尺寸大小:lo ...
- 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法
有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...
- javascript实现浏览器窗口传递参数
a.html <html> <head> <title>主页面</title> <script language="javascript ...
随机推荐
- java基础 3 Object通用方法（1）
Object通用方法(1) clone: 浅复制 被复制对象的所有变量都含有与原对象相同的值,而所有对其他对象的引用仍然指向原来的对象,换言之,浅复制仅仅复 ...
- vmware下centos6.7网络配置
使用NAT方式: 查看/etc/sysconfig/network-script/ 下面没有ifcfg-eth0 新建ifcfg-eth0,内容如下 DEVICE=eth0 BOOTPROTO=dhc ...
- MySQL查询在一个表而不在另一个表中的数据
1.使用not in,容易理解,效率低 select distinct A.ID from A where A.ID not in (select ID from B) 2.使用left join.. ...
- foobar2000实现用手机远程控制PC命令行版
实现此功能主要是在手机上使用Telnet命令实现下一首播放. 1.安装Telnet守护进程插件:http://www.foobar2000.org/components/view/foo_telnet ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能（图片放大器）
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...
- grep使用正则表达式搜索IP地址
递归搜索当前目录及其子目录.子目录的子目录……所包含文件是否包含IP地址 grep -r "[[:digit:]]\{1,3\}\.[[:digit:]]\{1,3\}\.[[:digit: ...
- [Sciter] Script与Native交互
原帖地址:http://www.cnblogs.com/yinxufeng/p/5653920.html Script与Native交互基础简化方式Script调用NativeNative调用Scri ...
- ffmpeg+libx264+facc交叉编译 实现264流录制avi文件
默认交叉编译器已经搭建好. .. . . . . .... .... 需求: 把标准的h264流保存成avi格式的实现文件,所以须要h264的解码器,avi文件容器,传输协议类型是文件.这些会体如今f ...
- sql 统计 url字符串处理
SELECT SUBSTRING_INDEX(url,'/',1) AS wed_domain,COUNT(1),SUM(no_open_times),SUM(no_ad_times),SUM(ok_ ...
- 一步一步学Silverlight 2系列（5）：实现简单的拖放功能
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...