javascript操作dom时关于宽高的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30682027/article/details/82809599

参考:
本文所有宽高均参考MDN
MDN-scrollWidth

1. Element关于宽高的属性

  • scrollWidth

只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域(例如,元素存在滚动条时), scrollWidth的值要大于clientWidth。

  • scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。

没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

  • clientHeight

这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.
clientHeight  clientWidth

  • offsetWidth

一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。

offsetWidth offsetHeight

  • offsetHeight

是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。

对于文档的body对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

1.1. 总结

最大值为 offset*,因为其包括scrollbar、border、padding、width
次之 为scroll*,因为scroll是client*+滚动区域的度量
最后是client*,在盒子模型中,其包括padding和元素宽度,不包括border

下边我从滚动条的角度,来解释我对这几个部分的理解
对于scrollTop,我的理解是:(这里把滚动条分为:上端空白、中间实体、下端空白三个区域)竖向滚动条的上端空白区域。

对于clientHeight,我的理解是:滚动条的中间实体部分,如果没有滚动条,当然就是body的不包含border的padding+widht

对于scrollHeight,我的理解是:滚动条的上端空白+中间实体+下端空白

对于offsetHeight,我的理解 是:clientHeight + border + 横向滚动条的高度。如果是offsetWidth,则为:clientWidth + border + 竖向滚动条的宽度。这里主要是最后滚动条,不要弄混就可以了。

1.2. 以下示例来自于MDN

判定元素是否滚动到底
如果元素滚动到底,下面等式返回true,没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

2. window.screen关于宽高的属性

值得注意的是,我在 360极速模式测试时,实际情况正好和MDN的描述相反。avail*受任务栏影响而不是直接的height、width受任务栏影响。所以说还是实践出真知呀。 MDN的描述误区在于width和height,它们其实是整个屏幕的宽高,而availWidth和availHeight的描述则没有问题,返回的就是浏览器可用的屏幕宽高(即除去任务栏的)

以下属性返回单位为像素

  • availWidth

返回浏览器窗口可占用的水平宽度(单位:像素)。

  • availHeight

返回浏览器窗口在屏幕上可占用的垂直空间,即最大高度。

  • width

返回屏幕的宽度。在非IE浏览器下,按照mdn的说法,应该是除去任务栏等其他特殊程序的宽度,但是我在360急速模式下测试,和任务栏宽度并没有关系,不知道和其它程序有没有关系。

注意,该属性返回的宽度值不一定就是浏览器窗口可使用的宽度。当有其他小工具占据了屏幕空间时,浏览器有时不能占用小工具(如任务栏)占据的空间。window.screen.width 和 window.screen.availWidth 两者不同。相关属性 window.screen.height。

在返回该值时,IE 会考虑缩放设置。只有在缩放比例为 100% 时,IE 才返回真实的屏幕宽度。

  • height
    返回屏幕高度。在非IE浏览器下,按照mdn的说法,应该是除去任务栏等其他特殊程序的高度,但是我在360急速模式下测试,和任务栏宽度并没有关系,不知道和其它程序有没有关系。

注意,该属性返回的高度值并不是全部对浏览器窗口可用。小工具(Widgets),如任务栏或其他特殊的程序窗口,可能会减少浏览器窗口和其他应用程序能够利用的空间。

当返回屏幕高度时,IE 会考虑缩放设置。只有当缩放比例为 100% 时,IE 才会返回真实的屏幕高度。

  • availLeft

返回浏览器可用空间左边距离屏幕(系统桌面)左边界的距离。

大多数情况下,该属性返回 0。

如果你在有两个屏幕的电脑上使用该属性,在右侧屏幕计算该属性值时,返回左侧屏幕的宽度(单位:像素),也即左侧屏幕左边界的 X 坐标。

在 Windows 中,该属性值取决于哪个屏幕被设为主屏幕,返回相对于主屏幕左边界的 X 坐标。就是说,即使主屏幕不是左侧的屏幕,它的左边界的 X 坐标也是返回 0。如果副屏幕在主屏幕的左侧,则它拥有负的 X 坐标。

[1] [2] - 左屏幕 availLeft 返回 0,右侧的屏幕返回左侧屏幕的宽度

[2] [1] - 左侧屏幕 availLeft 返回该屏幕的 -width,右侧屏幕返回 0

猜你喜欢

转载自blog.csdn.net/qq_30682027/article/details/82809599