用div替換所有圖像背景元素

var all = document.getElementsByTagName('img'); 
for(i = 0; i < all.length; i++){ 
    var newimg; 
    (newimg=document.createElement('div')).style.cssText="display:inline;width:"+all[i].width+"px;height:"+all[i].width+"px;background-image:url("+all[i].src+");"; 
    all[i].parentNode.replaceChild(newimg, all[i]); 
}

僅替換4個示例圖像（test1.jpg到test4.jpg）中的兩幅圖像（1和3），並且不顯示任何div背景。我在做這個錯嗎？用div替換所有圖像背景元素

到目前爲止已經產生的輸出結果：

<div style="display: inline; width: 400px; height: 400px; background-image: url(&quot;http://localhost/test1.jpg&quot;);"></div> 
<img src="test2.jpg"> 
<div style="display: inline; width: 796px; height: 796px; background-image: url(&quot;http://localhost/test3.jpg&quot;);"></div> 
<img src="test4.jpg">

的感謝！

來源

2010-11-03 Tobias

是否真的用"實體取代了你的雙引號？或者只是一個stackoverflow格式化工件？ – 2010-11-03 05:36:52

不存在引號 - 如果您要寫入代碼url（'「+ url +」'） - 生成的輸出將是相同的。我猜javascript中的渲染器只是默認添加了這個。 – Tobias 2010-11-03 05:41:25

cssText =「background-image：url（」+ all [i] .src +「）;」;結果如下：cssText =「background-image：url（'」+ all [i] .src +「'）;」;或者：cssText =「background-image：url（\」「+ all [i] .src +」\「）;」; – Tobias 2010-11-03 05:42:44

View live demo

你必須重複循環的方向相反。由於每次你替換img，長度爲所有數組減1。因此您無法訪問所有[1]，全部[3]元素。

另外由於display:inline，其他css文字（高度/寬度/背景/）圖像不適用於您的div，因此刪除它並使用float:left來代替。

希望這會有所幫助。

來源

2010-11-03 05:42:45

任何想法如何使div的行爲與圖片標籤完全相同？浮動：左有點打破了整個事情......;） – Tobias 2010-11-03 05:48:34

你仍然可以使用float：left，只需設置div的高度=圖像的高度[而不是寬度]，刪除邊框，添加邊距[如果需要]重複不要重複。查看更新鏈接http://jsfiddle.net/ChinmayeeG/EMkgf/3/ – 2010-11-03 05:54:49

使用
，你會看到顯着的差異 – Tobias 2010-11-03 05:58:02

用div替換所有圖像背景元素

回答

相關問題