JS获取浏览器可视区域的尺寸
所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度)。刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度,顺便将该文章摘下来,如下:
在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:
|
1
2
|
document.body.offsetWidthdocument.body.offsetHeight |
在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:
|
1
2
|
document.documentElement.clientWidthdocument.documentElement.clientHeight |
IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;
同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取:
|
1
2
|
window.innerWidthwindow.innerHeight |
网页可见区域宽: 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;
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。JS获取浏览器可视区域的尺寸的更多相关文章
- 【转】JS获取浏览器可视区域的尺寸
from: http://www.xiaoboy.com/detail/1341545044.html 所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 docum ...
- JS获取浏览器可视区域尺寸
本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...
- js 获取页面可视区域宽高
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...
- 记录一下获取浏览器可视区域的大小的js
function GetPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) ...
- js 获取浏览器可视窗口大小,滚动条高度
// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && ( ...
- js获取浏览器当前窗口的高度长度
js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...
- 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...
- JS 获取浏览器窗口大小
JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
随机推荐
- HDOJ 1716 排列2(next_permutation函数)
Problem Description Ray又对数字的列产生了兴趣: 现有四张卡片,用这四张卡片能排列出很多不同的4位数,要求按从小到大的顺序输出这些4位数. Input 每组数据占一行,代表四张卡 ...
- SRM 441(1-250pt, 1-500pt)
DIV1 250pt 题意:用数组A表示置换,由该置换得到数组B(B[0] = 0, B[i] = A[B[i-1]]).给定A,求一个A',使得由A'得到的B为单循环置换且A'与A的差距最小.定义A ...
- Java虚拟机基础知识
写在前面 之前老大让做一些外包面试,我的问题很简单: 介绍一下工作中解决过比较有意思的问题. HashMap使用中需要注意的点. 第一个问题主要是想了解一下对方项目经验的含金量,第二个问题则是测试下是 ...
- MongoDB基础知识 02
MongoDB基础知识 02 6 数据类型 6.1 null : 表示空值或者不存在的字段 {"x":null} 6.2 布尔型 : 布尔类型只有两个值true和false {&q ...
- 查看线程linux cpu使用率
Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算 转 http://www.cnblogs.com/lidabo/p/4738113.html目录(?)[-] proc文件系统 p ...
- xml学习篇(二) ----JSON 和XML对比
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言 ...
- 窗口对象的方法 prompt() 用来输入数据
prompt() 窗口对象的方法,用来输入信息的 一.window.prompt('提示信息',默认值); 1.例: window.prompt('请输入文字','这是默认值'); var us ...
- 弹出窗口zDialog的使用
因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm <script language="javascript ...
- INERT DELEYED、INSERT IGNORE replace into和insert区别
insert into表示插入数据,数据库会检查主键,如果出现重复会报错:replace into表示插入替换数据,需求表中有PrimaryKey,或者unique索引,如果数据库已经存在数据 ...
- Java语言基础(五)
Java语言基础(五) 一.浮点数 浮点数就是小数,其标准是IEEE 754,用指数和尾数表示 例如30000=3*10000=3*10^4 其中4是指数,3是尾数 Java中,浮点数有float ...