网页可见区域宽: 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. PhotoZoom安装之后没有快捷方式怎么解决?

    相信初次安装PhotoZoomPro的小伙伴都有这样的经历,就是软件安装完成之后桌面上并没有生成快捷方式,而且在所有程序里也找不到这个软件.这样的话,对于下次启动软件就相当困难了,甚至有些朋友为此又重 ...

  2. ZBrush2018中文版全球同步发售,终身授权

    ZBrush 2018于2018.3.28发布了!这个我们期待已久的2018新版本等了几年,它终于来了! 不负众望,ZBrush 2018的这一次更新,简直炸裂,新功能真是太好用了!2018版是ZBr ...

  3. ZBrush中标准几何体与Polymesh

    通过对ZBrush的学习,相信您已经对这款软件有了一定的了解,文本我们主要学习ZBrush®的3D物体标准几何体的特性和使用方法.在ZBrush中只有Polymesh(多边形网格)物体才能使用雕刻笔刷 ...

  4. 路飞学城Python-Day19

    [23.绑定方法与非绑定方法介绍] 再类的内部的定义的函数分为两大类: 1.绑定方法: 绑定到对象的方法:直接用def做的函数属性,类内部定义的函数,如果没有绑定装饰器,就是给对象使用的函数,绑定给谁 ...

  5. 《Exception》第八次团队作业:Alpha冲刺(第四天)

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...

  6. python--(常用模块-1)

    python--(常用模块-1) 一.模块的简单认识: 什么是模块,模块就是我们把装有特有功能的代码进行归类的结果,从代码编写的单位来看我们的程序,从小到大的顺序:一条代码<语句块<代码块 ...

  7. Vue经典开源项目

    Vue常用的开源项目和插件库 UI组件 element ★34,784 - 饿了么出品的基于Vue2的web UI工具套件storybook ★33,503 - 响应式UI 开发及测试环境Vux ★1 ...

  8. Vue基础知识点

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  9. MyBatis学习总结(19)——Mybatis传多个参数(三种解决方案)

    据我目前接触到的传多个参数的方案有三种. 第一种方案  DAO层的函数方法  Public User selectUser(String name,String area); 对应的Mapper.xm ...

  10. HDU 1350 Taxi Cab Scheme

    Taxi Cab Scheme Time Limit: 10000ms Memory Limit: 32768KB This problem will be judged on HDU. Origin ...