Yinde's Blog

Talk is cheap. Show me the code.

目录
JavaScript中的各种XY定位属性以及元素宽高属性
/      

JavaScript中的各种XY定位属性以及元素宽高属性

我们都用过不少JS中的定位属性,比如scrollTop,clientX等等,但是其实单纯从命名上,我们是很难区分各种属性的含义的,我平时也经常回去通过查询文档来了解差别。这里对这些类似属性进行一个汇总区分。

screenY/screenTop & screenX/screenLeft

这一点在浏览器端实现会有一些差异,有些浏览器实现了screenY/screenX,有些实现了screenLeft/screenTop,Chrome两者都实现了,所以使用了的时候不要忘了进行一些兼容性处理哦。

该属性表示浏览器窗口相对于屏幕左边和上边的位置。

下面是一个简单的实例,蓝色盒子代表浏览器,而黑色盒子代表整个屏幕,在Macos下,Y的距离是包含上部的任务栏的,所以该属性是距离到屏幕边缘的距离。

但要注意,这个属性有较大的浏览器差异,在IE下这个值会包含浏览器工具栏的高度,一定要谨慎使用。

偏移量

偏移量包含元素在屏幕上所有可见的空间。

偏移量共有四个属性

offsetHeight 元素在垂直方向上占用的空间大小,包括元素的高度,水平滚动条 上下边框的高度。

offsetWidth 元素在水平方向上占用的空间大小,包括元素的宽度,垂直滚动条,左右边框跨度

offsetTop 元素的上外边框至包含元素的上内边框之间的距离

offsetLeft 元素的左外边框至包含元素的左内边框之间的距离

客户区

客户区是指元素内容极其内边距所占据的空间大小。

与偏移量最大的区别是,他不包含边框与滚动条

clientHeight

clientWidth

滚动大小

滚动大小是指包含内容滚动的元素的大小

要注意的是滚动大小是包含边框在内的,但是不包含滚动条的宽度

scrollHeight 在没有滚动条的情况下 元素的总高度

scrollWidth 同样没有滚动条 元素的总宽度

scrollTop 被隐藏在顶部的像素数,修改可以让页面滚动

scrollLeft 被隐藏在左边的像素数,修改同样可以横向滚动

小心使用

偏移量,客户区,滚动大小读取属性都会导致浏览器进行重新计算,所以如果要多次访问务必缓存值,避免不必要的性能损耗。


标题:JavaScript中的各种XY定位属性以及元素宽高属性
作者:zhangzhengyi12
地址:https://blog.yinode.tech/articles/2019/01/21/1567739719667.html

评论