获取元素的尺寸,包括阴影

Question

这似乎是一个可疑的直接的问题,但已经StackOverflow的搜索和谷歌使用惯用的招数(getBoundingClientRect,clientWidth,offsetWidth)我还没有找到答案.

简单地说,有没有办法找到一个元素的宽度/高度,不仅包括边框,填充等,还有阴影？

请参阅:jsfiddle,了解一切如何返回没有阴影的元素宽度的示例.

编辑:理想情况下,我不想调查阴影的CSS属性并解析尺寸,但也许这是唯一的方法.

Answer 1

你是对的，我同意这是一个非常简单的问题。问题在于，当您为元素提供 box-shadow 时，box-shadow 会被视为具有相对于其父元素的绝对定位属性的子元素。因此，该对象在其父对象下的放置自动成为一个相对定位问题。它们现在本质上是两个独立的对象，需要单独计算。

我唯一的建议是计算 box-shadow 的 x/y 位置并将它们添加到父元素的宽度/高度中。例如，在 jsfiddle 中，框阴影沿 x 轴突出 10px，沿 y 轴突出 10px 以下。使用 5px 模糊，在任一侧添加 2.5px，然后将高度/宽度添加到这些值：

104px（宽度）+ 10px（x 轴阴影扩展）+ 2.5px（模糊）= 116.5px 宽度

104px（高度）+ 10px（y 轴阴影扩展）+ 2.5px（模糊）= 116.5px 高度