插入img在div中使用另一個div的背景圖像作爲src在JS

-1

那裏。我如何更改我的JS代碼以便在hidden_div中只有一個圖像？這是我的代碼。插入img在div中使用另一個div的背景圖像作爲src在JS

此致敬禮。

<a href="#"><div onClick="show(this);" class="img" style="background-ima ge:url('css/images1/img/img1.jpg');background-size:100% 100%;")></div></a> 
<a href="#"><div onClick="show(this);" class="img" style="background-image:url('css/images1/img/img2.jpg');background-size:100% 100%;")></div></a> 
<a href="#"><div onClick="show(this);" class="img" style="background-image:url('css/images1/img/img3.jpg');background-size:100% 100%;")></div></a> 

<div id="hidden_div"></div> 
<script> 
function show(element) { 
      var hidden = document.getElementById("hidden_div"); 

      var imgElement = document.createElement("IMG"); 

      imgElement.src=element.style.backgroundImage.replace('url(','').replace(')',''); 
      hidden.appendChild(imgElement); 
      }; 
</script>

來源

2015-04-04 Armine Babertsian

謝謝你們，非常，非常appeciated。 :) – 2015-04-04 05:56:02

雖然接受的答案不適用於跨瀏覽器。 – Shikkediel 2015-04-04 06:43:08

它適用於我的瀏覽器。 – 2015-04-04 07:06:38

你讓你的腳本中的小變化如下

function show(element) { 

    var hidden = document.getElementById("hidden_div"); 
    var imgURL = element.style.backgroundImage.replace('url(','').replace(')','');  
    var imgElement = "<img src='"+ imgURL +"' /> 
    hidden.innerHTML = imgElement; 

};

來源

2015-04-04 05:21:29

你知道你的代碼不能在Mozila Firefox上運行，瀏覽器顯示空的img圖標。 – 2015-04-04 08:22:46

嗨，親愛的，請進行如下更改var imgElement =「 ..刪除src =部分代碼中的雙引號我檢查了firfox和chrome，它現在可以工作 – 2015-04-04 08:45:14

謝謝，親愛的，非常感謝，現在它完美地工作 – 2015-04-04 09:50:22

我不很瞭解你想要什麼，如果你能向我解釋，請..但是，我認爲，每一個「格」內，在「風格」，有一個額外的）最後。

來源

2015-04-04 05:11:54

我已經解決了這個問題，謝謝你的關注，你說得對，在我的代碼中有一個額外的逗號，我已經糾正了它。:) – 2015-04-05 12:49:19

插入img在div中使用另一個div的背景圖像作爲src在JS

回答

相關問題