Question

我正在尝试使用<div>在onclick中获取图片。

现在我点击了获取文字。但我想点击div中的图像...

我怎么能这样做？？

这是我实施的代码，

代码：

<script>
function myFunction()
{
document.getElementById("surprise").innerHTML=images/aftersurprise.png;
}
</script>

当我点击元素时，我应该在惊喜元素上获得aftersurprise.png图像...

Answer 1

使用

document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";

Answer 2

您将图片网址提供给div元素的innerHTML。要添加图像，您必须执行此类操作

document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";

或者你为什么不选择jquery，这很容易就像

一样

$('#surprise').append("<img src='images/aftersurprise.png' />");

Answer 3

仅提供图片网址不会在div中添加图片。您必须使用 img 标记来指定它。

或使用以下代码动态创建它并附加到div

var img = document.createElement('img')
img.src = 'images/aftersurprise.png';
document.getElementById('surprise').appendChild(img);

Answer 4

试试这个

(function() {
    var oDiv = document.getElementById('surprise');
    oDiv.addEventListener('click', function() {
        this.setAttribute('style', 'background-image: images/aftersurprise.png');
    }, false);
})();

它将图像设置为div的背景图像

Answer 5

img = document.createElement("img");

img.setAttribute('src','https://www.google.co.in/images/srpr/logo11w.png');

document.getElementById("surprise").appendChild(img);

你可以在哪里设置你的图像src

Answer 6

据我了解，您的问题是所有内容都显示在新图片/现有图片上，但图片...！如果是这样，你只需要在调用JS函数时加入一些延迟。试试这个：

function Myfunction () 
{
    setTimeout(load, 1000); //this delay will allow browser to load complete image
    function load() 
    {
       var divToPrint = document.getElementById('surprise');
       var popupWin = window.open('', '_blank','width=1000, height=800, location=no, left=200px');
       //popupWin.document.open(); //needed when popup required
       popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
       popupWin.document.close();
    }  
}

Answer 7

$('#divname').append or prepend("<img src='pathOfImages.jpg'/>");

这里仅使用一个属性，例如append，另一个属性>（在内容之前）

onclick将图像添加到div

7 个答案: