网页可见区域的宽: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获取网页高度的更多相关文章

  1. js获取网页高度(详细整理)

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  2. JS获取网页高度和宽度

    注:此文属于转载自他人博客 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...

  3. js获取网页高度

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  4. js获取网页高度和宽度(备份)

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  5. js获取网页的各种高度

    原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...

  6. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

  7. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  8. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  9. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

随机推荐

  1. (2)java中的集中关系,is a, has a, 继承,重点聊聊继承

    java中常见的类关系(javacore上面也有介绍道的) 1.is a关系() 2.has a 整体与局部的关系 3.继承关系 是现实世界中存在而上面两种关系又无法描述的 当然谈的最多的是继承关系, ...

  2. git submodule 使用过程中遇到的问题

    git submodule 使用过程中遇到的问题 资源文件 原.gitmodules文件的内容如下: [submodule "Submodules/FFmpegWrapper"] ...

  3. iOS开发之类扩展

    在以往写代码时,我们经常是把声明写在.h文件中,把实现写在.m文件中,但是在实际开发中,如果把声明写在.h文件中会暴露程序很多属性(成员变量.成员变量的get和set方法),为了安全考虑,引入了类扩展 ...

  4. ajax ----进度条的原理

    一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...

  5. NPOI扩展--判断指定单元格是否为合并单元格和输出该单元格的行列跨度(维度)

    因工作需要用到跨合并单元格获取数据,所以写了个NPOI扩展类. 主要方法如下: 1.判断指定行/列索引(单元格)是否为合并单元格. 2.获取指定列索引的实际含有数据的单元格. 3.返回指定行/列索引的 ...

  6. java设计模式之桥接模式

    桥接模式 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦.这种模式涉及到一个作为桥接的 ...

  7. 老李分享:Uber究竟是用什么开发语言? 2

    Uber的任务分派系统是运行在Node上,这是一个运行在服务器端的JavaScript平台.当一个客户打开app或者网站来进行车辆预定或者调用其他的API来查看可用车辆信息的时候,大部分的这些服务都是 ...

  8. Android开发艺术1之Activity的生命周期

    作为<Android开发艺术探索>这本书的第一篇博客,我就多说几句.本系列博客旨在对书中相关内容进行解读,简化,提供一个入门到提高的流程.不敢说书评,也不能说教程,只希望对有些人有帮助就好 ...

  9. MongoDB基础教程系列--第五篇 MongoDB 映射与限制记录

    上一篇提到的 find() 的方法,细心的伙伴会发现查询的结果都是显示了集合中全部的字段,实际应用中,显然是不够用的.那么有没有办法指定特定的字段显示出文档呢?答案是肯定的,MongoDB 中用映射实 ...

  10. [转载]转载一篇好文章作为Java与面向对象之随感(3)

    关于对象与引用之间的一些基本概念. 初学Java时,在很长一段时间里,总觉得基本概念很模糊.后来才知道,在许多Java书中,把对象和对象的引用混为一谈.可是,如果我分不清对象与对象引用, 那实在没法很 ...