摘要：前言前段时间经常被这些参数搞混，在此总结一下，画了一张图，希望能对大家有所帮助相关元素的左边距离可视窗口左边的距离元素的右边距离可视窗口左边的距离元素的上边距离可视窗口顶部的距离元素的下边距离可视窗口顶部的距离元素的宽元素的高目前来看与相同
前言：前段时间经常被这些参数搞混，在此总结一下，画了一张图，希望能对大家有所帮助
getBoundingClientRect相关
left 元素的左边 距离 可视窗口左边的距离
right 元素的右边 距离 可视窗口左边的距离
top 元素的上边 距离 可视窗口顶部的距离
bottom 元素的下边 距离 可视窗口顶部的距离
width 元素的宽
height 元素的高
x/y 目前来看与let/top相同
鼠标相关事件位置属性
screenX/screenY 鼠标点击位置距离屏幕左上角的位置
clientX/clentY 鼠标点击位置距离可视窗口左上角的位置
pageX/pageY 鼠标点击位置距离文档左上角的位置
offsetX/offsetY 鼠标点击位置距离当前元素的边框内的位置
layerX/layerY 鼠标点击位置 距离 当前元素的距离最近的非static的元素的位置
注：此图来自网上
滚动相关
scrollTop 元素垂直方向被卷去的像素的距离
scrollLeft 元素水平方向被卷去的像素的距离
window.scrollX(window.pageXOffset) 文档/页面水平方向滚动的像素值
window.scrollY(window.pageYOffset) 文档/页面垂直方向滚动的像素值
scrollTo(xpos, ypos) 将内容滚动到指定的坐标
scrollBy(xnum, ynum) 将内容向右下滚动的像素数
元素大小相关
offsetWidth=border+padding+width
offsetHeight=border+padding+height
clientWidth=padding+width-滚动条宽度
clientHeight=padding+height-滚动条宽度
scrollWidth=padding+包含内容的完全宽度
scrollHeight=padding+包含内容的完全高度
示例图
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89713.html
摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。 其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...
摘要：和这一对属性是用来读取元素的的宽度和高度的。第二部分对象在中，对于元素的运动的操作通常都会涉及到对象，而对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。文章转自中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时...
摘要：一是的核心规定了这门语言的数据语法结构等基本概念。使用节点来把以及文档描述成一个多层次的节点结构。类型对象是其实例对象，是的属性，表示整个页面。和表示视窗的大小和表示改变视窗的方法。 JavaScript经历了残酷的竞争，至今已经统治了web世界，现在系统梳理一下相关的知识。 JavaScript可以分为三部分：ECMAScript、DOM和BOM。 一、ECMAScript是Java...
阅读 586·2021-09-24 09:48
阅读 2474·2021-08-26 14:14
阅读 505·2019-08-30 13:08
阅读 1427·2019-08-29 15:22
阅读 3033·2019-08-29 11:06
阅读 983·2019-08-26 18:26
阅读 980·2019-08-26 13:53
阅读 2467·2019-08-26 12:21
