javascript - 从元素背景中获取图像元素作为 DOM 资源

Question

考虑以下小提琴：http: //jsfiddle.net/rf4hV/

在那里，我正在听一个img. 加载图像后，我得到一个event具有target图像资源的图像资源。

1) 在不使用 jquery 加载器时是否有办法获取该资源？我该怎么做？

2）我怎样才能获取相同的资源the-div background-image？event.target本质上，我希望看到与问题 1相同的属性。

Answer 1

一种获取一个元素的 bg 图像并将其添加到另一个 DOM 节点的 jQuery 方法：

jsfiddle

  $(function() {          
      var bgimg = $("#the-div").css('background-image').replace(/url\(|\)/g,'');
      $("img").attr('src',bgimg);
      console.log($("img")[0]);
  });

这将为您提供src属性设置为#the-div背景的 DOM 图像对象。

你也可以在没有 jQuery 的情况下做同样的事情，甚至不需要将img元素添加到当前的 DOM 树

jsfiddle

  var thediv = document.getElementById("the-div")
  var img = new Image();
  img.src = document.defaultView.getComputedStyle(thediv, null).getPropertyValue('background-image').replace(/url\(|\)/g,'');
  console.log(img);

现在你有了一个 DOM 对象，你可以访问它的属性。

我希望这是你想要的。如果不从背景图像构造 DOM 对象，则无法将背景图像作为 DOM 对象访问，但这正是上述示例所做的。