网页可见区域的宽: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. Python总的字符串

    Python总最常用的类型,使用单引号双引号表示.三引号之间的字符串可以跨多行并且可以是原样输出的. Python中不支持字符类型,字符也是字符串. ---字符串的CRUD [1:3] [:6] -- ...

  2. 微信JS初始化--微信JS系列文章(一)

    概述 微信JS的使用方法,官方文档已经描述得比较清楚了,这里我就不重复介绍了,本文意在提供现成的代码,供大家快速迭代开发,以及补充一下官方文档描述得不够清楚的地方,避免大家踩相同的坑. 微信JS初始化 ...

  3. java学习(二)多态中成员变量详解

    今天我总结了一下java多态中成员变量的赋值与调用 举一个我当初做过的小案例: class Fu{ int num; void show(){} } class Zi extends Fu{ //in ...

  4. 【记录】解析具有合并单元格的Excel

    最近公司让做各种数据表格的导入导出,就涉及到电子表格的解析,做了这么多天总结一下心得. 工具:NOPI 语言:C# 目的:因为涉及到导入到数据库,具有合并单元格的多行必然要拆分,而NPOI自动解析的时 ...

  5. java与xml之间的转换(jaxb)

    使用java提供的JAXB来实现java到xml之间的转换,先创建两个持久化的类(Student和Classroom): Classroom: package com.model; public cl ...

  6. JS-DOM . 01 简单了解DOM

    DOM概述 html加载完毕,渲染引擎会在内存中把html文档生成一个DOM树,getElementById是获取内DOM上的元素,然后操作的时候修改的是该元素的属性 体验事件/事件三要素1.事件源( ...

  7. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

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

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

  9. Linux环境下的IDE,极大提升编程效率

    "一个真正的程序员是不用IDE(译者注:集成开发环境)的,他们都是用带着某某插件的文本编辑器来写代码."我们总能在某些地方听到此类观点.然 而,尽管越来越多的人同意这样的观点,但是 ...

  10. 玩转 SSH(七):使用 dubbo + zookeeper 实现服务模块化

    一.创建 SSMVCAnnoDemo 项目 点击菜单,选择“File -> New Project” 创建新项目.选择使用 archetype 中的 maven-quickstart 模版创建. ...