JavaScript圖片
[英]JavaScript images
問題描述
如何在同一頁面上多次顯示同一圖像？
<head>
<Script language="javascript">
function xdf(){
for (i=0;i<10;i++) {
document.write('<b>hello world</b><br>');
}
}
</script>
</head>
此代碼顯示“ hello world” 10次。 我想做同樣的事情，但要有一定的形象，而不是“你好詞” ...
5 個解決方案
解決方案1
3 2010-08-16 01:36:25
您可以使用document.createElement()在JavaScript中創建一個img元素，並使用Node.appendChild()將其附加到其他節點：
var img = document.createElement('img');
img.setAttribute('src', 'my_image.png');
document.getElemenetById('some-div').appendChild(img);
如果以上步驟重復多次，則會從瀏覽器的緩存中加載圖像，並將每個新的img元素附加到多個節點。
正如@Matthew Flaschen在下面的評論中建議的那樣，您也可以改用Node.cloneNode()解決方案。 您可以一次創建img元素：
var img = document.createElement('img');
img.setAttribute('src', 'my_image.png');
...然后使用img.cloneNode(false)作為appendChild()的參數：
document.getElemenetById('some-div').appendChild(img.cloneNode(false));
document.getElemenetById('some-other-div').appendChild(img.cloneNode(false));
解決方案2
2 2010-08-16 01:36:35
<img src="/path/to/img.png"/> <img src="/path/to/img.png"/>
解決方案3
2 2010-08-16 01:47:10
您可以克隆圖像：
<div><img src="http://www.google.com/favicon.ico" id="image" /></div>
<script type="text/javascript">
n = 5;
img = document.getElementById("image");
for (i=0; i<n-1; i++) {
img2 = img.cloneNode(false);
img2.id = img.id + "_clone" + i;
img.parentNode.appendChild(img2);
}
</script>
解決方案4
1 2010-08-16 02:19:31
..還是您想使用CSS定義背景？
<style type="text/css">
body { background: url("http://www.google.com/favicon.ico") left repeat-y; }
</style>
（假設您以前的評論是想將圖像放在左邊緣的一欄中）
解決方案5
0 已采納 2010-08-16 02:20:29
更改：
document.write('<b>hello world</b><br>');
進入：
document.write('<img src="IMAGE FILE NAME HERE.png" alt="TEXT HERE"><br>');
Javascript中的圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.