을 사용하여 <div>에 이미지를 가져 오려고합니다.onclick div에 이미지 추가
이제 클릭하면 텍스트가 나타납니다. 하지만 클릭 할 때 div에서 이미지를 가져오고 싶습니다 ...
어떻게해야합니까? 여기
내가 구현 한 코드 ,,입니다
코드 : 내가 요소를 클릭하면
<script>
function myFunction()
{
document.getElementById("surprise").innerHTML=images/aftersurprise.png;
}
</script>
내가 ... 깜짝 요소에 aftersurprise.png 이미지를 얻을해야
사용
document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";
이미지 URL을 지정하면 div 내에 이미지가 추가되지 않습니다. img 태그를 사용하여 지정해야합니다.
또는 동적으로 다음 코드를 사용하여 만들어보십시오 div
var img = document.createElement('img')
img.src = 'images/aftersurprise.png';
document.getElementById('surprise').appendChild(img);
에 추가이
(function() {
var oDiv = document.getElementById('surprise');
oDiv.addEventListener('click', function() {
this.setAttribute('style', 'background-image: images/aftersurprise.png');
}, false);
})();
그것은 당신이주는
사업부의 배경 이미지로 이미지를 설정합니다 이미지 URL은 div 요소의 innerHTML입니다. 당신은 왜 jquery로하지 않을이
document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";
또는 같은 뭔가를해야 거기에 이미지를 추가하려면, 여기
$('#surprise').append("<img src='images/aftersurprise.png' />");
순수한 JavaScript와 jQuery 코드의 차이점은 무시해도 좋습니다. jQuery를 사용할 때 사이트에 얼마나 많은 양이 걸립니까? – Rodrigo
img = document.createElement("img");
img.setAttribute('src','https://www.google.co.in/images/srpr/logo11w.png');
document.getElementById("surprise").appendChild(img);
u는 UR 이미지를 설정할 수 있습니다 같은 것을 아주 쉽게 src
알다시피, 귀하의 문제는 모든 콘텐츠가 이미지를 제외한 새로운/기존 페이지에 표시된다는 것입니다 ...! 그렇다면 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();
}
}
감사합니다 ..... ..... – MintY