Javascript中常用宽高和坐标属性

wuyangnju 发布于2019-08-20 10:37 / 1373人阅读

摘要：是一个只读的属性，元素的内容高度宽度，包括由于属性而不可见的部分。一个只读属性，返回一个指向最近的包含该元素的定位元素。很有用，因为和都是相对于其内边距边界的。它包括内部的宽度和高度和，但不包括滚动条和。

1.scrollHeight/Width

scrollHeight/Width是一个只读的属性，元素的内容高度/宽度，包括由于overflow属性而不可见的部分。不能直接从css中得到。scrollHeight/Width的值除了内容高度/宽度，也包括padding值。
scrollWidth类似。

2.scrollTop/Left

以scrollLeft为例：
scrollLeft属性能够得到或者设置元素滚动到左边的像素值。注意(rtl和ltr会不同)

假如element不能够scroll的时候，比如没有设置overflow属性。scrollLeft会被重置为0，不管你设置什么值，都不会有什么效果。（这也是很多scrollLeft失效的原因）

设置的值小于0，重置为0

设置的值超过内容允许滚动的最大值，重置为最大值。

注意事项：scrollLeft属性是应用在父元素上面，而不是子元素。
其它scrollTop与scrollLeft类似。

3. offsetHeight/Width

offsetHeight/Width是一个只读属性，返回一个元素的结构宽度，包括元素的border和padding、滚动条(如果存在的话)和css设置的高度/宽度。

4.offsetTop/Left

以offsetLeft为例, 返回当前元素左上角相对于HTMLElement.offsetParent节点的左边界偏移的像素值。

HTMLElement.offsetParent:一个只读属性，返回一个指向最近的包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

例如：


  Short span. 
  Long span that wraps within this div.

offsetTop 类似的道理。

5.clientWidth/Height

clientWidth/Height是一个只读属性，对于没有css或者内联元素，其值为0。它包括内部的宽度和高度和padding，但不包括滚动条、border和margin。

6.clientTop/Left

clientTop/Left指的是一个元素顶部/左边框的宽度。

7. 区别

摘自stackoverflow的一幅图，可以很好地看到之间的区别：

8.clientX/Y

clientX/Y属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平/竖直坐标，不包括滚动条滚动才能显示的区域。定位的依据为浏览器窗口内容区域的左上角。

9.offsetX/Y(experimental technology)

offsetX/Y 设置或者是得到鼠标相对于目标事件的父元素的内边界在X/Y坐标上的位置

10.screenX/Y

screenX/Y 相对于物理屏幕/监视器的左上角，只有你增加或减少显示器的数量或分辨率，参考点才会移动。

11.pageX/Y

pageX/Y 相对于整个渲染页面的左上角（包括通过滚动隐藏的部分),简单来说就是元素。

参考资料

1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

私有云混合云 javascript属性 javascript常用代码 javascript常用事件 javascript常用框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80234.html

HTML元素和事件对象中的各种宽高和位置

摘要：元素和事件对象中的各种宽高和位置标签经常被一堆的弄混，统一整理一下。元素中的宽高和位置属性表示元素的内部宽度，以像素计。表示元素实际占用的高度，包括其边框，内边距和元素内容。 HTML元素和事件对象中的各种宽高和位置标签： js [TOC] 经常被一堆的xxxWidth,xxxLeft弄混，统一整理一下。 1. HTML元素中的宽高和位置属性 clientWidth 表示元素的内...

gggggggbong 2019-08-22 10:40 评论0 收藏0
JavaScript 中那些关于坐标和距离的属性与方法

摘要：摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象，提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。一前言在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少...

jsummer 2019-08-26 13:57 评论0 收藏0
JavaScript 中那些关于坐标和距离的属性与方法

摘要：摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象，提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。一前言在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少时间精力...

guqiu 2019-05-27 17:42 评论0 收藏0
JavaScript中的各种宽高属性

摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 评论0 收藏0
03.Android之View原理问题

摘要：这种自定义控件在原生控件提供的方法外，可以自己添加一些方法。从顶层父到子递归调用方法，方法又回调。目录介绍 3.0.0.1 View的绘制需要经过哪些过程？有哪些常用回调方法？View的绘制流程的详细流程是怎样的？ 3.0.0.2 View绘制流程，当一个TextView的实例调用setText()方法后执行了什么？请说一下原理…… 3.0.0.3 requestLayout()、...

FrozenMap 2019-08-16 14:14 评论0 收藏0