网页可见区域的宽: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. WINFROM 无边框窗体的移动和改变大小

    因为去掉了边框  移动和调整大小都用不了了,可以调用WIN32的API来实现 1.定义必须常量 ; ; ; ; ; ; const int Guying_HTBOTTOMLEFT = 0x10; ; ...

  2. 微信JS分享功能--微信JS系列文章(二)

    概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...

  3. ArrayList去除重复元素(包括字符串和自定义对象)

    1.去除重复字符串 package com.online.msym; import java.util.ArrayList; import java.util.Iterator; @SuppressW ...

  4. Java变量和对象的作用域

    大多数程序设计语言都提供了"作用域"(Scope)的概念. 对于在作用域里定义的名字,作用域同时决定了它的"可见性"以及"存在时间".在C, ...

  5. [.net 面向对象程序设计深入](8)认识.NET Core

    [.net 面向对象程序设计深入](8)认识.NET Core  1,概述          .NET 经历14年,在Windows平台上的表现已经相当优秀,但是“跨平台.开源”却是其痛点,从16年开 ...

  6. Java排序算法之直接选择排序

    Java排序算法之直接选择排序 基本过程:假设一序列为R[0]~R[n-1],第一次用R[0]和R[1]~R[n-1]相比较,若小于R[0],则交换至R[0]位置上.第二次从R[1]~R[n-1]中选 ...

  7. 使用Atom打造无懈可击的Markdown编辑器

    一直以来都奢想拥有一款全能好用的Markdown编辑器,直到遇到了Atom.废话不多说,直接开搞! 1. 安装Atom 下载安装Atom:https://atom.io/ 2. 增强预览(markdo ...

  8. 百度cdn资源公共库共享及常用开发接口

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用 网站:http://cdn.code.baidu.com/ 常用资源: jquery: http://libs.baidu.c ...

  9. 模式识别与机器学习—bagging与boosting

    声明:本文用到的代码均来自于PRTools(http://www.prtools.org)模式识别工具箱,并以matlab软件进行实验. (1)在介绍Bagging和Boosting算法之前,首先要简 ...

  10. Android之仿京东淘宝的自动无限轮播控件

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...