网页可见区域的宽: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即可

  1. function getInfo() {
  2. var s = "";
  3. s += " 网页可见区域宽:" + document.body.clientWidth;
  4. s += " 网页可见区域高:" + document.body.clientHeight;
  5. s += " 网页可见区域宽:" + document.body.offsetWidth + " (包括边线和滚动条的宽)";
  6. s += " 网页可见区域高:" + document.body.offsetHeight + " (包括边线的宽)";
  7. s += " 网页正文全文宽:" + document.body.scrollWidth;
  8. s += " 网页正文全文高:" + document.body.scrollHeight;
  9. s += " 网页被卷去的高(ff):" + document.body.scrollTop;
  10. s += " 网页被卷去的高(ie):" + document.documentElement.scrollTop;
  11. s += " 网页被卷去的左:" + document.body.scrollLeft;
  12. s += " 网页正文部分上:" + window.screenTop;
  13. s += " 网页正文部分左:" + window.screenLeft;
  14. s += " 屏幕分辨率的高:" + window.screen.height;
  15. s += " 屏幕分辨率的宽:" + window.screen.width;
  16. s += " 屏幕可用工作区高度:" + window.screen.availHeight;
  17. s += " 屏幕可用工作区宽度:" + window.screen.availWidth;
  18. s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色";
  19. s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸";
  20. console.log(s);
  21. }
  22. 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. 深入浅出数据结构C语言版(2)——简要讨论算法的时间复杂度

    所谓算法的"时间复杂度",你可以将其理解为算法"要花费的时间量".比如说,让你用抹布(看成算法吧--)将家里完完全全打扫一遍大概要5个小时,那么你用抹布打扫家里 ...

  2. Android开发之音乐播放器

    做了一天的音乐播放器小项目,已经上传到github,将链接发到这里供大家参阅提议 https://github.com/wangpeng0531/MusicPlayer.git

  3. javascript 将数字(金额)转成大写

    将计算好的金额转换成大写,这些功能非常多,下面我改进了一下代码(原文在这里:http://www.cnblogs.com/zsanhong/p/3509464.html). /** * _SetNum ...

  4. iOS开发之视频播放

    1.如何播放视频 iOS提供了MPMoviePlayerController.MPMoviePlayerViewController两个类,可以用来轻松播放视频和网络流媒体\网络音频. 提示:网络音频 ...

  5. 解决修改mysql的data_dir所引发的错误

    今天,搭建新购的阿里云ECS环境(ubuntu 16.04 LTS),需要将mysql的数据保存在新挂载的磁盘上(已挂载到/mnt下),先停掉mysql服务,然后查看mysql并数据保存的位置: vi ...

  6. PRINCE2学习

    今天对PRINCE2中提及的7大主题进行学习,主要的内容是通过概述和PMBOK之间的对比做一些总结,每个主题所包含的过程和方法并没有太多涉及,没有对整个体系有全面深入的学习,有些断章取义的地方也请博友 ...

  7. 【Electron】Electron开发入门

    Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...

  8. 老李推荐:第2章3节《MonkeyRunner源码剖析》了解你的测试对象: NotePad窗口Activity之NoteEditor简介

    老李推荐:第2章3节<MonkeyRunner源码剖析>了解你的测试对象: NotePad窗口Activity之NoteEditor简介   我们在增加和编辑一个日记的时候会从NotesL ...

  9. 老李推荐:第1章2节《MonkeyRunner源码剖析》概述:边界

    老李推荐:第1章2节<MonkeyRunner源码剖析>概述:边界   边界 怎么样才算分析清楚一个事物的原理是什么呢?就以前面提到的<LINUX内核源代码情景分析>为例子,分 ...

  10. 老李分享:jvm垃圾回收

    老李分享:jvm垃圾回收   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478 ...