(知识点)JS获取网页高度
网页可见区域的宽:document.body.clientWidth
网页可见区域的高:document.body.clientHeight
网页可见区域的宽:document.body.offsetWidth(包括边线的宽)
网页可见区域的高:document.body.offsetHeight(包括边线的高)
网页正文全文的宽:document.body.scrollHeight
网页正文全文的高:document.body.scrollWidth
网页被卷去的高:document.body.scrollTop(IE8以下无效)
网页被卷去的左:document.body.scrollLeft(IE8以下无效)
网页被卷去的高:document.documentElement.scrollTop(IE8以下有效)
网页被卷去的左:document.documentElement.scrollLeft(IE8以下有效)
网页正文部分上:window.screenTop
网页正文部分做:window.scrollLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区的高度:window.screen.availHeight
屏幕可用工作区的宽度:window.screen.availWidth
相对于窗口左上角的X:window.event.clientX
相对于窗口左上角的Y:window.event.clientY
相对于整个页面的X:window.event.X
相对于整个页面的Y:window.event.Y
这里注意:
2级Dom没有提供把窗口坐标转化为文档坐标的标准方法。在IE浏览器以外,使用window.pageXOffset和window.pageYoffset即可
function getInfo() {
var s = "";
s += " 网页可见区域宽:" + document.body.clientWidth;
s += " 网页可见区域高:" + document.body.clientHeight;
s += " 网页可见区域宽:" + document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高:" + document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽:" + document.body.scrollWidth;
s += " 网页正文全文高:" + document.body.scrollHeight;
s += " 网页被卷去的高(ff):" + document.body.scrollTop;
s += " 网页被卷去的高(ie):" + document.documentElement.scrollTop;
s += " 网页被卷去的左:" + document.body.scrollLeft;
s += " 网页正文部分上:" + window.screenTop;
s += " 网页正文部分左:" + window.screenLeft;
s += " 屏幕分辨率的高:" + window.screen.height;
s += " 屏幕分辨率的宽:" + window.screen.width;
s += " 屏幕可用工作区高度:" + window.screen.availHeight;
s += " 屏幕可用工作区宽度:" + window.screen.availWidth;
s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色";
s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸";
console.log(s);
}
getInfo();
(知识点)JS获取网页高度的更多相关文章
- js获取网页高度(详细整理)
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
- JS获取网页高度和宽度
注:此文属于转载自他人博客 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
- js获取网页高度
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- js获取网页高度和宽度(备份)
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- js获取网页的各种高度
原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...
- JS获取网页属性包括宽、高等
JS获取网页属性包括宽.高等. function getInfo() { // www.jbxue.com var s = ""; s += " 网页可见区域宽:&q ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
随机推荐
- 树链剖分-SPOJ375(QTREE)
QTREE - Query on a tree You are given a tree (an acyclic undirected connected graph) with N nodes, a ...
- 浅谈!SQL语句中LEFT JOIN ON WHERE和LEFT JOIN ON AND的区别
今天的工作学习之路是一个数据库的小知识,当时没有区分出所以然,特此记录分享一下子. 众所周知,数据库的表都是单独存在的,但是当我们进行联合查询(多表查询)时,我们获得数据库返回的值时就好像在一张表里一 ...
- RabbitMQ入门教程
1.下载安装RabbitMQ windows下 先 下载Erlang 64位 其它去这里下载 http://www.erlang.org/downloads 然后 下载RabbitMQ 官网 htt ...
- 为已有表快速创建自动分区和Long类型like 的方法-Oracle 11G
对上一篇文章进行实际的运用.在工作中遇到有一张大表(五千万条数据),在开始的时候忘记了创建自动分区,导致现在使用非常不方便,查询的速度非常的满,所以就准备重新的分区表,最原始方法是先创建新的分区表,然 ...
- GreenDao与Rx的完美搭配
作为Android开发者,一定不会对 GreenDao 和 ReactiveX 陌生. GreenDao 号称Android最快的关系型数据库 ReactiveX Rx是一个编程模型,目标是 ...
- 字典树 Trie树
什么是Trie树? 形如 其中从根节点到红色节点的路径上的字母所连成的字符串即为一个Trie树上所存的字符串. 比如,这个trie树上有ab,abc,bd,dda这些字符串. 至于怎么构建和查找或添加 ...
- android-studio-bundle-141.2178183首次执行Hello World的时候出现ADB not responding. If you'd like to retry, then please manually kill "adb.e的错误
这是由于有其他程序在占用adb.exe要使用的端口5037,打开命令提示符cmd,输入指令netstat -aon|findstr 5037查看在使用此端口的程序,如 8036即为占用该端口号的PID ...
- 记录一个NPE问题
昨天在做公司项目时,我在一处地方加了一个逻辑校验,之后测了下发现在方法调用深处有一处NPE,来源于另一个同事的代码. 其实NPE本应该是个Java编程中老掉牙的问题,但我觉得这一处错误还是比较典型的, ...
- 【uwp】浅谈China Daily中数据同步到One Drive的实现
新版China Daily与旧版相比新增了数据同步的功能,那这个功能具体是如何实现的呢,现在让我们来一起看看. 1.注册应用 开发者中心的应用注册就不用多说了(https://developer.mi ...
- js日期转化(计算一周的日期)
之前做项目的时候遇到过一个日期转化的问题,一个日期控件和近一天,近七天和近一月的的联动效果.发现自己不会,后来就百度了一下解决了这个问题. 现在抽空又写了一个时间转化的案例(计算一周的日期),因为之前 ...