获取包括投影阴影在内的元素尺寸

Question

这似乎是一个可疑的简单问题，但在搜索过StackOverflow和Google并使用了通常的技巧（getBoundingClientRect, clientWidth, offsetWidth）后，我仍然没有找到答案。

简单来说，有没有一种方法可以找到包括不仅是边框、填充等，还包括阴影在内的元素的宽度/高度？

详见：jsfiddle，这里有一个示例，展示了所有内容都返回不带阴影的元素宽度。

编辑：理想情况下，我希望不必调查阴影的CSS属性并解析出其尺寸，虽然这可能是唯一的方法。

- Rhys

---

我的猜测是，你编辑后的解决方案确实是唯一的方法... - Rein

Answer 1

“你说得对，我同意这是一个相当直接的问题。问题在于，当你给一个元素添加了 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高度

- Collarbone

Answer 2

使用shadowParent类

这里有另一种对于我来说在一个特定的例子中非常有效的技术：

创建一个影响高度的shadowParent类，其值与子元素的阴影相同。如果需要，为此目的创建新的父级div。可以使用CSS类来实现，例如： shadow 和 shadowParent。

那么每当您需要高度+阴影时，只需获取父元素的高度即可。

优点：

• JS中试图计算高度的复杂性较低。
• 您可以在一个地方控制值（在您定义CSS值的任何位置）。

在这种情况下，我只是在父元素上设置了一些填充，以适应子元素的阴影。然后获取父元素的高度。

/* ----------------------- */
/* SHADOW */
/* ----------------------- */
.shadow {
    box-shadow: 0px 10px 10px black;
}

.shadowParent {

    /* Apply matching values to some property that affects parent height. */
    /* I used padding, which worked for my context. */
    
    padding-bottom: 10px;  /* Value matches shadow values. */

}

<div id="wrapper" class="shadowParent">
   <div id="content" class="shadow">
     Content + shadow
   </div>
</div>

- Kalnode