为什么当我在代码前面放置警报时，jQuery才可以正常工作？

Question

这个问题的写法也令人震惊，因为我认为这对于其他初学者也是一个很好的教学时间。

目标是在图像周围创建som artsie-fartsie角标记，这是它的外观：

要实现这一点，我首先要有一个边界/全部压缩div，然后是2个空白div，然后是图像。边界div用一些artsie-fartsie box-shadowing进行样式设置和填充，两个空白div用作边界div和图像下方的遮罩；即：

值得注意的是，图像高度是可变的。困难最初源于何处。

我最初尝试使用CSS伪元素div和:before在没有2个空:after的情况下进行“屏蔽”。用这种方法解决该问题是可取的，我的眼睛更亮，更干净，但是在垂直边距上使用％的效果很奇怪。 “垂直交叉口罩”很容易实现。这是一些CSS，可以正常运行：

.vert-review-image-cross-block {
    background: white;
    position: absolute;
    width: 70%;
    height: calc(100% + 12px);
    left: 50%;
    margin-left: -35%;
    top: -6px;
}

但是，对“水平”蒙版框执行相同操作无效。在margin-top属性中使用％无效，因为出于超出我的理智的原因，CSS不支持此功能，而是根据宽度计算％。因此，以下CSS无法将遮罩框正确地定位在“ y”轴上：

.horiz-review-image-cross-block {
    background: white;
    position: absolute;
    height: 70%;
    width: calc(100% + 12px);
    top: 0;
    left: -6px;
    margin-top: 15%;
}

高度正确渲染，为边框高度的15％。但是同样，在边距中使用％仅使用宽度。然后，我的解决方案是使用JS（jQuery）来操作DOM-删除CSS中的margin-top并将其与JS添加在一起。这也支持空div的需要，因为JS无法影响伪元素。从理论上讲，下面应该可以正常工作。在冗长的方面有点麻烦，我没有尝试任何重构，因为它的行为不正确（在document.ready()函数中调用）：

function reviewImageHorizMaskMargin() {
    let reviewMediaImageBoxHeight = $(".review-media-image-box").height();
    $(".horiz-review-image-cross-block").css({"margin-top": (reviewMediaImageBoxHeight + 10) * 0.15 + "px"});
}
reviewImageHorizMaskMargin();

但是它不起作用，应用的余量很小。因此，我添加了一堆console.logs来了解最新情况：

function reviewImageHorizMaskMargin() {
    console.log("$('.review-media-image-box').height()[1]: " + $(".review-media-image-box").height());
    let reviewMediaImageBoxHeight = $(".review-media-image-box").height();
    console.log("reviewMediaImageBoxHeight: " + reviewMediaImageBoxHeight);
    console.log("$('.review-media-image-box').height()[2]: " + $(".review-media-image-box").height());
    $(".horiz-review-image-cross-block").css({"margin-top": (reviewMediaImageBoxHeight + 10) * 0.15 + "px"});
    console.log("$('.review-media-image-box').height()[3]: " + $(".review-media-image-box").height());
}
reviewImageHorizMaskMargin();

输出如预期的那样有问题：

$('.review-media-image-box').height()[1]: 22
reviewMediaImageBoxHeight: 22
$('.review-media-image-box').height()[2]: 22
$('.review-media-image-box').height()[3]: 22

然后我添加了alert，然后发生了一些不可思议的事情：

...
console.log("$('.review-media-image-box')[1]: " + $(".review-media-image-box").height());
alert("$('.review-media-image-box')[1]: " + $(".review-media-image-box").height());
let reviewMediaImageBoxHeight = $(".review-media-image-box").height();
...

警报是我所期望的，控制台输出...不是很多：

$('.review-media-image-box').height()[1]: 22
reviewMediaImageBoxHeight: 234
$('.review-media-image-box').height()[2]: 234
$('.review-media-image-box').height()[3]: 234

那么alert函数如何“闪烁”出正确的高度，从而正确地显示边距？