javascript - jQuery 宽度函数在文本上返回 0

Question

$(window).load(function() {
  $("img").each(function() {
    $(this).after("<div id='watermark'>Hello</div>");
    var width = $('#watermark').eq(0).width();
    //This outputs 0s
    console.log(width);
    $("#watermark").css("margin-left", "-" + width.toString() + "px");
  });


  $("img").click(function() {
    setTimeout(function() {
      $("img").each(function() {
        //this outputs 37
        console.log($('#watermark').eq(0).width());
        $(this).after("<div id='watermark'>Hello</div>");
      });
    }, 500);
  });

});

我试图获取在图像上插入的水印的宽度，以便我可以通过从左边距减去宽度的一半来使水印居中。然而，由于某种原因，即使我知道 div 存在，我还是从 .width() 函数中得到 0，因为我已经在上一行中插入了 div。另外，在代码的第二部分中，您将看到单击图像时，宽度会正确返回。为什么我在上半场得到了 0？

编辑:这是水印上的 CSS:

#watermark {
  opacity: 0.5;
  z-index: 99;
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  text-align: center;
}

position:absolute会导致问题吗？

Answer 1

基于 css 更新，绝对位置元素没有宽度，除非您声明宽度或同时设置 left 和 right。

在你的CSS规则中尝试包含width:100%或right:0，然后运行你的代码，你将得到一些宽度值