02-回顾DOM对象位置坐标属性

最新推荐文章于 2021-08-31 12:34:30 发布

New globe

最新推荐文章于 2021-08-31 12:34:30 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/w19981225/article/details/107470269

版权

DOM 对象的宽高属性

获取DOM对象的宽度width + padding : obj.clientWidth
获取DOM对象的高度height + padding : obj.clientHeight
元素没有出现滚动条，获取的就是width+padding; 如果出现滚动条，获取的是 width + padding - 滚动条的宽度
获取DOM对象的实际宽度 width + padding + border: obj.offsetWidth
获取DOM对象的实际高度 height + padding + border: obj.offsetHeight
不受元素滚动条的影响
获取DOM对象的边框的宽度： obj.clientLeft
获取DOM对象的边框的高度 : obj.clientTop
获取元素的偏移值 obj.offsetTop
获取元素的偏移值 obj.offsetLeft
offsetLeft 和 offsetTop 参照 offsetParent , 考虑该元素的祖先元素是否添加了定位属性，如果存在这样的父元素，则相对于该父元素；获取的相对于父元素的偏移值；如果不存在，则相对于body; 获取的是元素相对于页面的便宜值
获取元素相对于页面的偏移值： obj.getBoundingClientRect() ; 结果是一个矩形对象DOMRect ; 里边还有八个值：

width : 元素的宽度
height : 元素的高度
left ： 元素相对于页面的左侧的偏移值
bottom ： 元素的下边界相对于页面的偏移值
top ： 元素相对于页面顶部的偏移值
right ： 元素的有边界相对于页面的偏移值
x ： 元素的偏移值, 等于left
y ：元素的偏移值， 等于 top

获取的是元素相对于页面的偏移值，和定位属性没关系

元素内容的真实宽度： scrollWidth
元素内容的真实高度： scrollHeight
考虑元素内容是否溢出，没有溢出，则为 width + padding ，和 clientWidth取值一样；如果内容溢出，内容的宽度 + 左边的padding值
获取内容被卷出去的宽度： scrollLeft
获取内容被卷出去的高度 : scrollTop
需要结合onscroll 事件；内容必须要有滚动条

事件对象的坐标获取依赖于事件对象

e.clientX 和 e.clientY : 获取的鼠标位置相对于页面的坐标
e.offsetX 和 e.offsetY : 获取的鼠标位置相对于事件源的坐标；事件在谁身上触发谁就是事件源
e.screenX 和e.screenY : 获取的鼠标位置相对于显示器的坐标
e.pageX 和 e.pageY : 获取的鼠标位置相对于文档的坐标，文档是整个HTML结构；页面没有出现滚动条，则 pageX 和 clientX 是相等的；如果页面出现滚动条，则 pageX 大于 clientX
获取浏览器窗口的滚动值： var sctop = document.docuemntElement.scrollTop || document.body.scrollTop || window.pageYOffset