坐标(鼠标/触摸)

event.screenX                          鼠标/触摸,相对于显示屏的X坐标
event.screenY 鼠标/触摸,相对于显示屏的Y坐标 event.clientX 鼠标/触摸,相对于浏览器视口的X坐标
event.clientY 鼠标/触摸,相对于浏览器视口的Y坐标 event.pageX 鼠标/触摸,相对于文档的X坐标(ie不支持)
event.pageY 鼠标/触摸,相对于文档的Y坐标(ie不支持) event.offsetX 鼠标/触摸,相对于触发事件的X坐标(ie独有)
event.offsetY 鼠标/触摸,相对于触发事件的Y坐标(ie独有)

滚动(窗口/页面)

window.pageXOffset                     X轴滚动条,能向右滚动的距离(只读属性/IE需要9以上/PC和移动端都支持)
window.pageYOffset Y轴滚动条,能向下滚动的距离(只读属性/IE需要9以上/PC和移动端都支持) document.body.scrollLeft X轴滚动条,能向右滚动的距离(仅移动端支持)
document.body.scrollTop Y轴滚动条,能向下滚动的距离(仅移动端支持) document.documentElement.scrollTop X轴滚动条,能向右滚动的距离(仅PC端支持)
document.documentElement.scrollLeft Y轴滚动条,能向下滚动的距离(仅PC端支持) document.scrollingElement.scrollTop X轴滚动条,能向右滚动的距离(ie不支持)
document.scrollingElement.scrollLeft Y轴滚动条,能向下滚动的距离(ie不支持)

宽高(屏幕/游览器视口/页面)

screen.width                           屏幕宽度
screen.height 屏幕高度
screen.availWidth 屏幕可用宽度
screen.availWidth 屏幕可用高度 window.outerWidth 游览器宽度
window.outerHeight 游览器高度
window.innerWidth 游览器视口宽度
window.innerHeight 游览器视口高度 document.body.offsetWidth 页面宽度
document.body.offsetHeight 页面高度
document.body.clientWidth 页面可显示宽度
document.body.clientHeight 页面可显示高度

宽高&距离(DOM)

offsetWidth                            元素宽度(可视内容区 + 滚动条 + 内边距 + 边框)
offsetHeight 元素高度(可视内容区 + 滚动条 + 内边距 + 边框)
offsetLeft 与相邻父级的左距离
offsetTop 与相邻父级的上距离 clientWidth 元素宽度(可视内容区 + 内边距)
clientHeight 元素高度(可视内容区 + 内边距)
clientLeft 内边距边缘与边框边缘的距离(左边框)
clientTop 内边距边缘与边框边缘的距离(上边框) scrollWidth 元素宽度(可视内容区 + 滚动内容区 + 内边距)
scrollHeight 元素高度(可视内容区 + 滚动内容区 + 内边距)
scrollLeft 隐藏的滚动距离(待滚动距离)
scrollTop 隐藏的滚动距离(待滚动距离)

宽高&位置(DOM)

getBoundingClientRect()                返回元素的宽高与坐标集合
> 宽高 = 可视内容区 + 内边距 + 边框
> 坐标
left = 位移 + 外边距
right = 位移 + 完整盒子模型所占宽度
top = 同left
bottom = 同right getClientRects() 返回元素的数个矩形区域的类数组对象(集合)
> 用于块级元素,则集合[n]和getBoundingClientRect返回相同
> 用于内联元素,内联元素有多少行,该方法返回的对象有多少个成员
> 该方法,用于判断行内元素是否换行,以及行内元素的每一行的位置偏移 document.getClientRects(x, y) 返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
> 最顶层,指z-index最大的元素
> 最里层,是指最里层面的子元素
> 该方法,用来检测元素是否发生重叠或是碰撞

临近父容器

offsetParent

获取与邻近父级的距离集合

function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x+=e.offsetLeft;
y+=e.offsetTop;
e=e.offsetParent;
}
return { x: x, y: y };
} 1.对于表格和内嵌框架布局的页面,由于不同浏览器实现这些元素的方式不同,得到的值并不精确
2.当文档中含有滚动条的时候,该方法就不能正常工作了

javascript获取坐标/滚动/宽高/距离的更多相关文章

  1. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

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

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

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

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

  4. 监听视图树 ViewTreeObserver 获取View的宽高

    前奏:在哪里可以获取到View的宽高 我们知道,在onCreate方法执行完毕以后,View才开始被测量,所以我们在onCreate方法里面通过view.getWidth()或view.getMeas ...

  5. Js怎么获取DOM及获取浏览器的宽高?

    在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...

  6. 在渲染前获取 View 的宽高

    在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...

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

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

  8. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  9. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

随机推荐

  1. 微信小程序中的tabBar设置

    我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app ...

  2. 给body设置高度

    今天做一个小demo,需要给body设置高度为100%,然鹅发现只设置body的height不可行,需,html,body{height:100%;}为何呢?一个容器的height是从上一级继承而来的 ...

  3. # C# 中的Task创建指南

    本文还处于草稿阶段,难免还有错误修改改正,逻辑还不是很清晰,笔者会努力完善,长期更新! [0000] 前言 标题起得有些"大",意在集大家的力量,总结出来一份关于Task相对&qu ...

  4. Spring Cloud Config 配置中心实践过程中,你需要了解这些细节!

    本文导读: Spring Cloud Config 基本概念 Spring Cloud Config 客户端加载流程 Spring Cloud Config 基于消息总线配置 Spring Cloud ...

  5. 基于 HTML5 和 WebGL 的地铁站 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  6. springboot启动报错 Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

    新建了一个springboot项目报一下错误: Failed to configure a DataSource: 'url' attribute is not specified and no em ...

  7. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  8. Flume 学习笔记之 Flume NG高可用集群搭建

    Flume NG高可用集群搭建: 架构总图: 架构分配: 角色 Host 端口 agent1 hadoop3 52020 collector1 hadoop1 52020 collector2 had ...

  9. 配置中心-Apollo

    配置中心-Apollo 2019/10/01 Chenxin 配置服务主要有 携程Apollo.百度Disconf.阿里ACM,目前以Apollo用户量最大.适用场景,多用于微服务,与K8S结合好. ...

  10. mvvm的初步思想

    1.Object.defineProperty(obj,key,desc); 用法:1.给对象新增属性和特性 2.修改对象属性值和特性 desc(属性特性): 1.enumerable:boolean ...