使用 jQuery 将 img 更改为带背景的 div答案

【问题标题】：Change img to div with background, with jQuery使用 jQuery 将 img 更改为带背景的 div
【发布时间】：2011-05-23 00:53:12
【问题描述】：

我想使用 jQuery 将所有具有特定类的 img 元素切换为具有背景的 div。这样一来：

<img class="specific" src="/inc/img/someimage.png" />

变成：

<div class="specificDiv" style="background: url(/inc/img/someimage.png); width: fromImageElementPX; height: fromImageElementPX;"></div>

我想这样做，以便我可以使用 css3 绕过角落。 CMS 用户 customer 将只能插入 IMG 元素。

提前致谢。

【问题讨论】：

标签： jquery rounded-corners dom-manipulation

【解决方案1】：

这应该可以，但我还没有测试过。

var origImage = $(".specific");
var newDiv = $("<div>").addClass("specificDiv");
newDiv.css("background-image", "url('" + origImage.attr("src") + "')");
newDiv.width(origImage.width()).height(origImage.height());
origImage.replaceWith(newDiv);

【讨论】：

最后一行应该是 origImage.replaceWith(newDiv)。除此之外......它的工作原理！
另外...您可以做的另一件事是替换 newDiv.css("width", origImage.width()).css("height", origImage.height());与 newDiv.width(origImage.width()).height(origImage.height()); - 可能会让它更干净一些。

【解决方案2】：

http://jsbin.com/ozoji3/3/edit

$(function() {
  $("img.rounded").each(function() {
    var $img = $(this),
        src = $img.attr('src'),
        w = $img.width(),
        h = $img.height(),
        $wrap = $('<span class="rounded">').css({
            'background-image': 'url('+ src +')',
            'height': h+'px',
            'width': w+'px'
          });
    $(this).wrap($wrap);
  });
});

【讨论】：

我喜欢你使用$.wrap() 而不是我的$.replaceWith()。
你的答案在哪里？不要链接到答案。在此处发布代码。
@patrick，为什么？点击链接并测试它不是那么容易吗？
该链接可用于测试，但您也应该包含解决方案（就像您现在所做的那样）。这就是 SO 的工作方式。您的解决方案应该在 5 年后可供人们使用，而链接可能无法使用。

【解决方案3】：

$('img.specific').each(function(){ //iterate through images with "specific" class
    var $this = $(this), //save current to var
        width = $this.width(), //get the width and height
        height = $this.height(),
        img = $this.attr('src'), //get image source
        $div = $('<div class="specificDiv"></div>')
        .css({
            background: 'url('+img+')', //set some properties
            height: height+'px',
            width: width+'px'
        });
    $this.replaceWith($div); //out with the old, in with the new
})

【讨论】：

我宁愿做$div = $('<div></div>').setClass($(this).getClass()+'Div')

【解决方案4】：

我能想到的最简单的方法：

$('.specific').replaceWith(function () {
    var me = $(this);
    return '<div class="specificDiv" style="background: url(' + me.attr('src') + '); width: ' + me.width() + 'px; height: ' + me.height() + 'px;"></div>';
});

【讨论】：

+1 我认为它一点也不难读。对我来说看起来很干净。
效果很好！有没有办法将 DIV 中的背景图像调整为 DIV DOM 大小？

【解决方案5】：

另一种选择（从 Andrew Koester 获取代码）是将其放入插件中。这可能是它的样子......

$.fn.replaceImage = function() {
  return this.each(function() {
    var origImage = $(this);
    var newDiv = $("<div>").attr("class", "specificDiv");
    newDiv.css("background", "url('" + origImage.attr("src") + "')");
    newDiv.width(origImage.width()).height(origImage.height());
    origImage.replaceWith(newDiv);  
  });
};

然后，要执行它，只需调用类似这样的东西......

$(".specific").replaceImage();

【讨论】：