【翻译】确定元素的尺寸

确定元素的尺寸

为了确定元素的宽度和高度,您可以查看几个属性,但要确定哪个属性适合您的需求可能会很棘手。 本文旨在帮助您做出该决定。 请注意,所有这些属性都是只读的。 如果要设置元素的宽度和高度,请使用宽度和高度或覆盖 min-width 和 max-width 以及 min-height 和 max-height 属性。

它占用了多少空间?

如果您需要知道一个元素占用的空间总量,包括可见内容的宽度、滚动条(如果有)、填充和边框,您可以使用 HTMLElement.offsetWidth 和 HTMLElement.offsetHeight 属性。 大多数情况下,当没有对元素应用任何变换时,它们与 Element.getBoundingClientRect() 的宽度和高度相同。 在变换的情况下,offsetWidth 和 offsetHeight 返回元素的布局宽度和高度,而 getBoundingClientRect() 返回渲染宽度和高度。 例如,如果元素的宽度为:100px; 和变换:比例(0.5); getBoundingClientRect() 将返回 50 作为宽度,而 offsetWidth 将返回 100。

显示内容的大小是多少?

如果您需要知道实际显示的内容占用了多少空间,包括填充但不包括边框、边距或滚动条,您可以使用 Element.clientWidth 和 Element.clientHeight 属性:

内容有多大?

如果您需要知道内容的实际大小,无论当前可见多少,您都需要使用 Element.scrollWidth 和 Element.scrollHeight 属性。 这些返回元素整个内容的宽度和高度,即使由于使用滚动条而目前只有部分内容可见。

例如,如果一个 600x400 像素的元素显示在 300x300 像素的滚动框中,则 scrollWidth 将返回 600,而 scrollHeight 将返回 400。

原文

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

posted @ 2022-10-31 17:27  星小梦  阅读(36)  评论(0编辑  收藏  举报