Question

我有这个

<div class="data">
<img src="#" style="background:url('o.jpg')">
</div>

我想在同一个div中使用此（背景）网址并使用src =“background img url”创建新的img标记，并使用js或jq删除旧的img标记

我试图这样做from

var img = document.querySelector('img'),
    // parse image URL and strip away url('')
    imgURL = img.style.backgroundImage.replace('url("','').replace('")','');
img.src = imgURL;

// remove style attribute afterwards.
img.removeAttribute('style');

但它对我不起作用所以我必须以另一种方式做到这一点

Answer 1

尝试这个

var img = $('#img').css('background-image');;
	
	imgURL = img.replace('url("','').replace('")','');
	img = imgURL;
	
	$('.data').html('<img src='+img+' width="100" height="100">');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<img src="#" style="background:url('o.jpg')" width="100" height="100" id="img">
</div>

Answer 2

尝试以下代码： -

var img   = document.querySelector('img');

	// Get the background image style
	var style = img.currentStyle || window.getComputedStyle(img, false);
	var bi    = style.backgroundImage.slice(4, -1);
	
        // create a new image
	var newImage = document.createElement("IMG");

	// Replace string double quotes
	newImage.src = bi.replace(/^"|"$/g, '');;
    
        // append image inside div to current image as it next sibling 
        img.parentNode.insertBefore(newImage, img.nextSibling);

        // Remove old image
	img.parentNode.removeChild(img);

<div class="data">
   <img src="#" style="width:300px;height:250px;background-image: url('http://i.stack.imgur.com/5eiS4.png')"/>
</div>

Answer 3

高度和宽度属性supports subset of xpath

删除height和width属性 http://jsfiddle.net/z2jKA/564/

我改变了你的编码变化并且它的工作非常好。你查看这个链接jsFiddle。我是通过改变代码中的一些来完成的。也许它对你有帮助

// option
'cssClass': 'filter'

/* css */
.filter .google-visualization-controls-categoryfilter-selected li {
  background-color: #e65100;
  border: 1px solid #ff9800;
  color: #ffffff;
  padding: 6px;
}

.filter .goog-link-button {
  cursor: pointer;
  float: right;
  margin-left: 4px;
}

从img标签获取背景图片网址，并使用该网址创建新的img标记

3 个答案: