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

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 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签

js得到区域长宽的更多相关文章

  1. js读取屏幕长宽

    网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽(包括边线的宽) document.body.o ...

  2. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  3. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  4. 纯css实现长宽等比例的div

    现代网站页面基本都需要响应式,一个div的长宽往往我们都设置为百分之多少,这个百分之是相对于父容器动态计算的 这样在浏览器宽度变化之后,我们的元素也能自动更新长宽.例如:我们在页面上摆了一个div,这 ...

  5. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  6. vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽

    最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion ...

  7. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  8. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  9. Android获取屏幕长宽

    总结了下,我遇到的获取Android屏幕长宽的方式总共有三种.大同小异,重点在于如何获取系统中的WindowManager管理类对象,方可对数据的操作: 代码如下 /** * @return 屏幕的长 ...

随机推荐

  1. SpringMVC视频

    视频内容: 1.下载spring mvc以及spring mvc示例演示http://pan.baidu.com/s/1kTHRfDH 2.配置完善&初步探究控制器拦截http://pan.b ...

  2. day02 操作系统与编程语言

    目录 操作系统 操作系统是什么 操作系统做了什么 文件是什么? 为什么要有操作系统 操作系统有什么用 应用程序的启动和操作系统的启动 复盘QQ的启动 操作系统启动的流程 编程语言分类 机器语言 汇编语 ...

  3. sklearn学习8-----GridSearchCV(自动调参)

    一.GridSearchCV介绍: 自动调参,适合小数据集.相当于写一堆循环,自己设定参数列表,一个一个试,找到最合适的参数.数据量大可以使用快速调优的方法-----坐标下降[贪心,拿当前对模型影响最 ...

  4. 如何让select中的滚动条自动定位到框中选中项的位置

    document.getElementById("hidScrollTop").value = document.getElementById("slcYZYongFa& ...

  5. vue自定义组件并使用

    以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...

  6. [luogu] P3089 [USACO13NOV]POGO的牛Pogo-Cow

    P3089 [USACO13NOV]POGO的牛Pogo-Cow 题目描述 In an ill-conceived attempt to enhance the mobility of his pri ...

  7. nginx虚拟主机的配置不生效

    这个坑找了好久,今天终于找到了问题所在. 一般虚拟主机配置文件是vhost里面单独写一个网站名.conf,然后在nginx最后include vhosts/*.conf 引用. 但是我这里的vhost ...

  8. LoadRunner监控Window/Unix系统资源的配置

    LoadRunner监控Window/Unix系统资源需要做两件事情: 1.配置被监视的服务器,以便于LoadRunner能够获取系统资源使用情况的数据 2.在LoadRunner的Controlle ...

  9. 关于android的设备管理器-DevicePolicyManager(一)

    在Andorid的设置->安全里面有个设备管理器的选项,相信大部分android用户都不太会去注意这个东西.近期在安装了一个应用之后发现这个里面的东西变了.怎么回事呢,研究研究看看.</s ...

  10. cocos2d-x学习笔记(18)--游戏打包(windows平台)

    cocos2d-x学习笔记(18)--游戏打包(windows平台)           之前做好的游戏,都是在vs2008下编译执行的.假设说想把游戏公布到网上或者和其它人一起分享游戏,那就得对游戏 ...