JS获取浏览器可视区域的尺寸
所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度)。刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度,顺便将该文章摘下来,如下:
在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:
1
2
|
document.body.offsetWidth document.body.offsetHeight |
在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:
1
2
|
document.documentElement.clientWidth document.documentElement.clientHeight |
IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;
同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取:
1
2
|
window.innerWidth window.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 ...
随机推荐
- [转载] cookie、JS记录及跳转到页面原来的位置
额....如下 <!-- 定位页面的 Cookie function SetCookie(sName, sValue) { date = new Date(); s = date.getDate ...
- 【转】unity3d 如何得到当前物体播放的动画
原文:http://blog.csdn.net/smilelance/article/details/22285125 public static string GetCurrentPlayingAn ...
- hdu 4472 Count(递推即dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4472 代码: #include <cstdio> #include <cstring ...
- JavaEE中遗漏的10个最重要的安全控制
本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! JavaEE有一些超赞的内置安全机制,但它们远远不能覆盖应用程序要面临的所有威胁.很多常见攻击,例如跨站点脚本攻 ...
- 你不一定能做对的JavaScript闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- AutoLayout--masonry使用
[label1 mas_makeConstraints:^(MASConstraintMaker *make) { //使左边间距为 make.left.equ ...
- (组合数学3.1.1.1)POJ 1146 ID Codes(字典序法)
/* * POJ_1146.cpp * * Created on: 2013年10月8日 * Author: Administrator */ #include <iostream> #i ...
- 385. Mini Parser
括号题一般都是stack.. 一开始想的是存入STACK的是SRING,然后POP出括号在构建新的NestedInteger放到另一个里面,但是操作起来费时费力. 后来猛然发现其实可以直接吧Neste ...
- ELK初学搭建(elasticsearch)
ELK初学搭建(elasticsearch) elasticsearch logstash kibana ELK初学搭建 elasticsearch 1.环境准备 centos6.8_64 mini ...
- JDK安装目录下的src
学Java这么久,JDK目录下的包有哪些都不知道,今天偶然解压到src明白了许多道理 1.进入JDK安装目录,我的安装路径为:E:\JDK\jdk1.8.0,可以看到这里有个src压缩文件 2.直接解 ...