抓取圖像元素從元素的背景作爲DOM資源

考慮以下小提琴：http://jsfiddle.net/rf4hV/抓取圖像元素從元素的背景作爲DOM資源

在那裏，我聽的負載爲img。當圖像加載時，我得到一個event其中有一個圖像資源的target。

1）有沒有反正抓住這個資源時，不使用jquery loader？我會怎麼做？

2）我怎樣才能獲取the-divbackground-image的資源？從本質上講，我想從問題1

來源

2013-05-01 Jacksonkr

搶這樣？ http://jsfiddle.net/rf4hV/1/ – 2013-05-01 01:30:42

不完全。我正在尋找圖像的屬性，並從'＃the-div'而不是'img' – Jacksonkr 2013-05-01 02:09:49

要找哪個圖片的屬性？如果你在我的答案中顯示了背景圖像的URL，那麼你可以從圖像本身提取所有其他屬性，這樣做不是嗎？ – 2013-05-01 02:13:13

一個jQuery的方式看到相同的屬性event.target得到一個元素的背景圖片，並將其添加到其他DOM節點：

jsfiddle

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

這會給你DOM圖像對象src屬性設置爲#the-div的背景。

你也可以做同樣的沒有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對象訪問，但這正是上述示例所做的。

來源

2013-05-01 01:35:47

花了我一秒才明白你在做什麼。你知道你如何檢索'background-image'作爲URL字符串嗎？我試圖將'background-image'作爲DOM Resource來檢索。結果應該和我原來的'console.log'一樣。 – Jacksonkr 2013-05-01 02:14:24

我擴展了答案以展示如何在構造bg圖像後獲取圖像DOM對象。 – 2013-05-01 04:14:17

哦，我認爲那就是那個。謝謝馬丁！ – Jacksonkr 2013-05-02 16:28:33

抓取圖像元素從元素的背景作爲DOM資源

回答

相關問題