如何用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') + ')');
});