Измените img на div с фоном с помощью jQuery - PullRequest
Новая
       12

Измените img на div с фоном с помощью jQuery

3 голосов
/ 09 декабря 2010

Я бы хотел использовать 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, клиент, сможет вставлять только элементы IMG.

Заранее спасибо.

Ответы [ 5 ]

4 голосов
/ 09 декабря 2010

Самый простой способ, которым я могу придумать: 

$('.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>';
});
2 голосов
/ 09 декабря 2010 
$('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
})
1 голос
/ 09 декабря 2010

Это должно сработать, но я не проверял. 

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);
0 голосов
/ 09 декабря 2010

Другой вариант (взяв код от Эндрю Кёстера), это поместить его в плагин. Вот как это может выглядеть ... 

$.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();
0 голосов
/ 09 декабря 2010

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

<code>$(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);
  });
});
...