如何用DOM接下来出现的img src替换div背景？

Question

我在大约400页上有此标头：

<div class="header">
</div>

然后，在HTML中向下不可避免地会有一个图像，例如：

<img src="image.png" />

我想做的是让JS或JQuery在标记中搜索出现的下一个img标签，并将标头替换为：

<div class="header" style="background-image:image.png">
</div>

这有可能吗？ 这个Stack问题有一种获取下一张图片的方法：如何在特定的dom标签之后（是否具有同级标签）获取下一张图片标签？ 但我无法弄清楚如何根据上述所需结果将该图像设置为背景。

Answer 1

jQuery具有.css() ，它将允许您指定CSS属性值。

elem.css('background-image', url); 会成功的

但香草JS的实现方法是使用elem.style.backgroundImage = url;

Answer 2

您可以使用:first jQuery选择器。

$(document).ready(function () { $('.header').css('background-image', $('.header img:first').attr('src')); });

Answer 3

这是我的方法：

$(".header").each(function() {
  $(this).css('background-image', 'url(' + $(this).next('img').attr('src') + ')');
});