document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

// 部分jQuery函数
$(window).height()  //浏览器时下窗口可视区域高度
$(document).height()    //浏览器时下窗口文档的高度
$(document.body).height()      //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width()  //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()      //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

js获取网页的各种高度和宽度的更多相关文章

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

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

  2. js获取网页中宽高度集合

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  3. js获取网页和屏幕高度

    获取浏览器窗口的可视区域高度和宽度 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象 ...

  4. js获取页面的各种高度与宽度

    document.body.scrollTop等属性可以获取页面滚动距离等,但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0, 所以一 ...

  5. js获取当前浏览器页面高度及宽度信息的方法

    var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); var scroll ...

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

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

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

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

  8. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

  9. js技术要点---JS 获取网页源代码

    JS 获取网页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html& ...

随机推荐

  1. eclipse workspace出错而导致启动不了

    遇到这种问题也是第一次让我觉得eclipse没有vs强大. 说正题,关于怎么解决的问题,也是上网搜了一大堆.主要有两种吧: 1.就是删除这个workspace的整个metadata,这样就可以打开这个 ...

  2. 单元测试-代码覆盖率工具 -- JaCoCo

    最近学习Mybatis的官方文档,看到了[项目文档]一节有很多内容没有见过,做个笔记,理解一下. 随着敏捷开发的流行,编写单元测试已经成为业界共识.但如何来衡量单元测试的质量呢?有些管理者片面追求单元 ...

  3. SAP 增强说明

    转自http://blog.csdn.net/lyb_yt/article/details/8177974 (一)什么是增强(Enhancement)? 简单地说,增强就是ERP系统中标准程序的出口, ...

  4. dennis gabor 从傅里叶(Fourier)变换到伽柏(Gabor)变换再到小波(Wavelet)变换(转载)

    dennis gabor 题目:从傅里叶(Fourier)变换到伽柏(Gabor)变换再到小波(Wavelet)变换 本文是边学习边总结和摘抄各参考文献内容而成的,是一篇综述性入门文档,重点在于梳理傅 ...

  5. tiny4412SD启动盘的制作--1

    一.使用SD-flasher工具烧写superboot到SD卡. 1.SD-Flasher.exe 会对 SD 卡进行分区,第一个分区为 130M 用于存放 Superboot4412, 剩下的空间格 ...

  6. URAL 1218 Episode N-th: The Jedi Tournament(强连通分量)(缩点)

    Episode N-th: The Jedi Tournament Time limit: 1.0 secondMemory limit: 64 MB Decided several Jedi Kni ...

  7. 课堂所讲整理:HTML--7JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  8. 【NOI2011】【P1308】道路修建

    这题也太水了吧,为什么不是我这届的NOI(╯‵□′)╯︵┻━┻ 原题: 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都 ...

  9. 文件的搜寻【转vbird】

    which (寻找『运行档』) [root@www ~]# which [-a] command 选项或参数: -a :将所有由 PATH 目录中可以找到的命令均列出,而不止第一个被找到的命令名称 分 ...

  10. PHP安装libevent扩展

    1. 下载扩展 官方地址http://pecl.php.net/package/libevent 请根据自己的PHP脚本选择相应版本 如 wget http://pecl.php.net/get/li ...