javascript获取坐标/滚动/宽高/距离
坐标(鼠标/触摸)
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获取坐标/滚动/宽高/距离的更多相关文章
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
$(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...
- 监听视图树 ViewTreeObserver 获取View的宽高
前奏:在哪里可以获取到View的宽高 我们知道,在onCreate方法执行完毕以后,View才开始被测量,所以我们在onCreate方法里面通过view.getWidth()或view.getMeas ...
- Js怎么获取DOM及获取浏览器的宽高?
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...
- 在渲染前获取 View 的宽高
在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
随机推荐
- fslove - Matlab求解多元多次方程组
fslove - Matlab求解多元多次方程组 简介: 之前看到网上的一些资料良莠不齐,各种转载之类的,根本无法解决实际问题,所以我打算把自己的学到的总结一下,以实例出发讲解fsolve. 示例如下 ...
- opencv边缘检测
人眼怎么识别图像边缘? 比如有一幅图,图里面有一条线,左边很亮,右边很暗,那人眼就很容易识别这条线作为边缘.也就是像素的灰度值快速变化的地方. sobel算子 sobel算子是一个离散差分算子. 图像 ...
- JVM 调优 - JPS
Java命令学习系列(一)——Jps 2015-04-16 分类:Java 阅读(23993) 评论(7) 阿里大牛珍藏架构资料,点击链接免费获取 jps位于jdk的bin目录下,其作用是显示当前系统 ...
- Shell之文本排序命令
目录 Shell之文本排序命令 参考 wc命令 sort命令 uniq命令 Shell之文本排序命令
- Shell之Test命令
目录 Shell之Test命令 参考 Test简介 Test语法 表达式之逻辑运算 表达式之字符串判断 表达式之整数判断 表达式之文件判断 Shell之Test命令
- apache中通过mod_rewrite实现伪静态页面的方法
rewrite规则学习 我们新建一个.htaccess文件之后,就在里面写入以下内容: RewriteEngine on #rewriteengine为重写引擎开关on为开启off为关闭 Rewrit ...
- IO复用,AIO,BIO,NIO,同步,异步,阻塞和非阻塞 区别
一.什么是socket?什么是I/O操作? 我们都知道unix(like)世界里,一切皆文件,而文件是什么呢?文件就是一串二进制流而已,不管socket,还是FIFO.管道.终端,对我们来说,一切都是 ...
- 创建一个 Laravel 项目
创建一个 Laravel 项目,首先需要安装 Composer ,如果没有安装的参考 https://docs.phpcomposer.com/00-intro.html 一.安装 Laravel 安 ...
- idea快捷键(mac下)
ctrl+/ 代码提示 command+o 搜索要进入的类并进入 command+shift+enter 另起一行 command+shift+u 在变成全大写与变成全小写之间切换 shift+鼠标滑 ...
- Kafka常用运维操作
创建主题kafka-topics.sh --zookeeper localhost:2181 --create --topic my-topic --replication-factor 3 --pa ...