Javascript 使用：before和：after获取合成元素的实际高度

是否有一种方法可以在javascript中获得使用

：before

和

：after

绘制的元素的实际高度（jquery也可以）

签出此小提琴：

---

谢谢

您可以使用

window.getComputedStyle

访问：before伪元素的样式。看见但是，这将获取元素的css高度和宽度，而不是旋转变换后的边界框

进入hacky领域后，我从中借用了代码，将伪元素中的所有样式复制到实际元素中，将其添加到DOM中并用于获取边界框

var style = window.getComputedStyle(
    document.querySelector(".arrow"), ":before"
    )

var dest = {}
if (style.length) {
     for (var i = 0, l = style.length; i < l; i++) {
         prop = style[i];
         camel = prop.replace(/\-([a-z])/, camelize);
         val = style.getPropertyValue(prop);
         dest[camel] = val;
     }
 } else {
     for (prop in style) {
         camel = prop.replace(/\-([a-z])/, camelize);
         val = style.getPropertyValue(prop) || style[prop];
         dest[camel] = val;
     }
 }

var copy = $("<div />").css(dest)
copy.appendTo(".arrow")
var boundingRect = copy[0].getBoundingClientRect()
console.log(boundingRect.height)
console.log(boundingRect.width)
copy.remove()

function camelize(a, b) {
    return b.toUpperCase();
}

var style=window.getComputedStyle(
document.querySelector（“.arrow”），“：before”
)
var dest={}
if（样式长度）{
for（变量i=0，l=style.length；i

---

请参见

绝对定位的伪元素不会影响元素流您是对的，它是元素的高度，而不是变换后覆盖的区域。没有多大用处：（太棒了，这成功了！我可以建议你编辑你的答案，以便它只包含正确的解决方案吗？这将最适合将来偶然发现这个问题的人。编辑后我将接受你的答案。编辑答案是为了清晰，你是对的，如果不阅读整个评论线索，它会令人困惑。