确定元素的尺寸
您可以查看几个属性来确定元素的宽度和高度，并且确定哪个属性适合您的需求可能很棘手。本文旨在帮助您做出决定。请注意，所有这些属性都是只读的。如果要设置元素的宽度和高度，请使用width和height或覆盖min-width和max-width，以及min-height和max-height属性。
它占用了多少空间？
如果您需要知道元素占据的总空间，包括可见内容的宽度、滚动条（如果有）、填充和边框，则需要使用HTMLElement.offsetWidth和HTMLElement.offsetHeight属性。在大多数情况下，当元素没有应用任何转换时，这些属性与Element.getBoundingClientRect()的宽度和高度相同。在转换的情况下，offsetWidth和offsetHeight返回元素的布局宽度和高度，而getBoundingClientRect()返回渲染宽度和高度。例如，如果元素具有width: 100px;和transform: scale(0.5);，则getBoundingClientRect()将返回 50 作为宽度，而offsetWidth将返回 100。另一个区别是offsetWidth和offsetHeight将值四舍五入为整数，而getBoundingClientRect()提供更精确的小数点值。
显示内容的大小是多少？
如果您需要知道实际显示内容占用的空间，包括填充但不包括边框、边距或滚动条，则需要使用Element.clientWidth和Element.clientHeight属性。
内容有多大？
如果您需要知道内容的实际大小，而不管当前显示了多少内容，则需要使用Element.scrollWidth和Element.scrollHeight属性。这些属性返回元素的整个内容的宽度和高度，即使由于使用了滚动条而只有一部分内容可见。
例如，如果一个 600x400 像素的元素显示在一个 300x300 像素的滚动框内，则scrollWidth将返回 600，而scrollHeight将返回 400。