网页可见区域的宽: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. Java基础一:面向对象的特征

    经过16年校招,自己在Java基础方面也算有了一个质的飞跃,从原来知其然,到现在知其所以然,现将学习心得总结于此. 首先需要知道类和对象是什么? 维基百科定义类为: an extensible pro ...

  2. java中有符号和无符号数据类型发生转换

    package com.itheima.test01;/* * byte short int long float double 是有符号位的数 * char boolean 是无符号位的数 * 补码 ...

  3. 【G】系列导航

    G.开源的分布式部署解决方案 [G]开源的分布式部署解决方案 - 预告篇 [G]开源的分布式部署解决方案(一) - 开篇 [G]开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的 [ ...

  4. [译]Selenium Python文档:六、页面对象

    本章是介绍页面对象设计模式的教程.一个页面对象代表了web应用用户接口的一片区域,你的测试代码将与之交互的. 使用页面对象模式的好处: 可以创建在多个测试样例中都可使用的可重用代码 减少重复性代码 如 ...

  5. Butter Knife使用详解

    Butter Knife Github地址: https://github.com/JakeWharton/butterknife 官方说明给出的解释是 Bind Android views and ...

  6. benchmark 库

    性能测试的库 https://github.com/bestiejs/benchmark.js

  7. 如何写一手漂亮的 Vue

    前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...

  8. mvalidator手机端校验

    官网地址:https://github.com/efri-yang/mobileValidate#%E5%8F%82%E6%95%B0 使用方法: html如下: <li class=" ...

  9. .NET中数据访问方式(一):LINQ

    语言集成查询(Language-Integrated Query),简称LINQ,.NET中的LINQ体系如下图所示:   在编程语言层次,LINQ对于不同的数据源提供了相同的查询语法,方便了程序员操 ...

  10. jmeter 使用jmeter 录制web脚本

    1.打开jmeter.鼠标右击工作台.添加HTTP代理服务器 2.设置端口号.目标控制器.分组 3.添加查看结果树 4.点击启动.确定完成 5.打开浏览器直接进行操作.就可以看到所录制的脚本信息