Question

这似乎是一个可疑的直截了当的问题，但是搜索过StackOverflow和Google并使用了常用的技巧（getBoundingClientRect，clientWidth，offsetWidth）我还没有找到答案

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

请参阅：jsfiddle，了解一切如何返回没有阴影的元素宽度的示例。

编辑：理想情况下，我不想调查阴影的CSS属性并解析尺寸，尽管这可能是唯一的方法。

Answer 1

你是对的，我同意这是一个非常直截了当的问题。这就是问题，当你给一个元素一个盒子阴影时，盒子阴影就像一个具有绝对定位属性的子元素一样对待它的父元素。因此，自动将该对象放置在其父对象下成为相对定位问题。它们现在基本上是两个独立的对象，需要单独计算。

this php implementation

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

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

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

Answer 2

使用 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>

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

2 个答案:

使用 shadowParent 类