我想使用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元素。
提前致谢。
答案 0 :(得分: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 :(得分:2)
$('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
})
答案 2 :(得分: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);
答案 3 :(得分:0)
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);
});
});
答案 4 :(得分:0)
另一种选择(从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();