javascript - 用 div 背景元素替换所有图像

Question

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 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">

谢谢!

Answer 1

View live demo

您必须反向迭代循环。由于每次替换 img 时，all 数组的长度都会减一。因此您无法访问所有 [1]、所有 [3] 元素。

同样由于 display:inline，其他 css 文本(高度/宽度/背景/)图像不适用于您的 div，因此将其删除并使用 float:left相反。

希望这会有所帮助。