将背景图像从一个 div 复制到另一个答案

【问题标题】：copy background-image from one div to another将背景图像从一个 div 复制到另一个
【发布时间】：2017-03-12 06:02:20
【问题描述】：

我有多个 div，它们可能被视为具有不同背景图像和 css 文件的按钮，样式如下：

#button1 { background-image: url('../images/abc.png) }
#button2 { background-image: url('../images/def.png) }
#button3 { background-image: url('../images/ghi.png) }

每个按钮也是 .button 类的一部分。

我还有一个带有“popup”类的 div。如果我单击任何按钮，它就会添加新类：isActive。

我想读取具有“isActive”类的按钮的背景图像并将其放入“弹出”div。

我想用 jQuery 做这样的事情：

var bg;
bg = $('.isActive').css('background-image')
console.log(bg)
$('.popup').css('background-image', bg )

不幸的是，console.log 返回的 bg 包含：

file:///C:/Users/me/projects/images/abc.png

有没有一种优雅的方式来复制不完整的路径与“file://”等等，只是“../images/abc.png”，正如我在css中定义的那样？

【问题讨论】：

您有什么理由要这样做吗？您使用 JS 检索的文件路径是相对路径的已解析绝对路径，如果您想按原样使用它，它应该可以正常工作。
"../images"+bg.split("images")[1] - 我猜你想要$('.popup').css('background-image', "url("+bg +")")
@terry 我知道为什么会这样，只是想知道如何解决它
也看到这个问题：stackoverflow.com/questions/21681646/…
那就是西蒙。请将该答案复制到下面的帖子中，我会接受这个答案

标签： jquery css

【解决方案1】：

为每个背景添加一个 css 类。然后，您将能够为弹出窗口分配您想要的任何背景。

.bgr1 { background-image: url('../images/abc.png) }
.bgr2 { background-image: url('../images/def.png) }
.bgr3 { background-image: url('../images/ghi.png) }

然后赋值：

var allClasses = ['bgr1', 'bgr2', 'bgr3'];
var bgr = $('.isActive').attr('class').split(' ').filter(cls=>allClasses.indexOf(cls) > -1).shift();
if (bgr)
    $('.popup').addClass(ngr);

更新

取自这里：Copy background from one element to another using jQuery not working in firefox:

$('.popup').css('background', $('.isActive').css('background-image'));

【讨论】：

这不是一个好主意，因为背景不止三个。

【解决方案2】：

您可以在这里找到您的解决方案：Get BackgroundImage

$(this).css('background-image');

【讨论】：

【解决方案3】：

提示：您的 js 代码 src（源代码）与您的 html/php 文件相关，而不是与您的 js 文件相关。

【讨论】：