Question

＆＃13;

$(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);
  });

});

＆＃13;

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

编辑：这是关于水印的CSS：

＆＃13;

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

＆＃13;

位置：绝对导致问题吗？

Answer 1

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

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

Answer 2

我已将代码添加到代码段中，它似乎在最初和img点击处理程序中都有效。这是片段：

$(window).load(function() {
  $("img").each(function() {
    $(this).after("<div id='watermark'>Hello</div>");
    var width = $('#watermark').eq(0).width();
    console.log("Initial width: ", width);
//        $("#watermark").css("margin-left", "-" + width + "px");
  });

  $("img").click(function() {
    setTimeout(function() {
      $("img").each(function() {
        console.log("Handler width: ", $('#watermark').eq(0).width());
        $(this).after("<div id='watermark'>Hello</div>");
      });
    }, 500);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#watermark {
  opacity: 0.5;
  z-index: 99;
  position: absolute;
  color: white;
  width: 100%;
  top: 50%;
  left: 50%;
  text-align: center;
}
</style>
<img src="http://www.va.gov/OSDBU/images/business.png">

现在，我必须添加一些HTML才能使用，因为没有提供。从我可以从Javascript代码中辨别出来，这就是所需要的。如果缺少某些内容，请显示详细信息（例如实际代码）。

jQuery width函数在文本上返回0

2 个答案: