$(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会导致问题吗?
最佳答案
基于 css 更新,绝对位置元素没有宽度,除非您声明宽度或同时设置 left
和 right
。
在你的CSS规则中尝试包含width:100%
或right:0
,然后运行你的代码,你将得到一些宽度值
关于javascript - jQuery 宽度函数在文本上返回 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37635269/