用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替换所有图像背景元素

回答

相关问题