Javascript在頁面加載中不改變圖像源

我對JavaScript很陌生。我正在嘗試在頁面加載時更改圖片來源。我不知道爲什麼這不起作用。有人能給我提供一些見解嗎？這裏是我的html代碼：Javascript在頁面加載中不改變圖像源

<html> 
 
    <body onload="changeImage()"> 
 
    <ul id="character-list"> 
 
     <li id="character1"> 
 
     <img src="character1.jpg" width="250px" height="280px" alt="" />   
 
     </li> 
 
    </ul> 
 
    
 
    </body> 
 
    
 
    <script> 
 
    function changeImage(){ 
 
     var charDiv = document.getElementById("character1"); 
 
     var imgTag = charDiv.getElementsByTagName('img'); 
 
     imgTag.src = "character2.jpg"; 
 
    } 
 
    </script> 
 
</html>

來源

2015-10-13 TheRadVillager

'getElementsByTagName'會給你'image'標記數組所以'imgTag.src'是不會在這種情況下工作。 – Sushil

['.getElementsByTagName']（https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName） – Andreas

但是，該charDiv.getElementsByTagName（「IMG」）只返回圖像的陣列在id =「character1」的元素中。 – TheRadVillager

getElementsByTagName("img")會給你<img>元素的數組。在這種情況下，你需要簡單地訪問只圖像元素陣列charDiv.getElementsByTagName('img')[0]在：

<html> 
 
    <body onload="changeImage()"> 
 
    <ul id="character-list"> 
 
     <li id="character1"> 
 
     <img src="character1.jpg" width="250px" height="280px" alt="" />   
 
     </li> 
 
    </ul> 
 
    
 
    </body> 
 
    
 
    <script> 
 
    function changeImage(){ 
 
     var charDiv = document.getElementById("character1"); 
 
     var imgTag = charDiv.getElementsByTagName('img')[0]; 
 
     imgTag.src = "character2.jpg"; 
 
    } 
 
    </script> 
 
</html>

來源

2015-10-13 16:56:24

This Works！非常感謝：）。所以，charDiv.getElementsByTagName（'img'）會返回id爲「character1」的元素內的一組圖像元素，對吧？而由於只有一個圖像，所以0索引給出了有關的圖像標籤。如果我錯了，請糾正我。 – TheRadVillager

@ wackydoodle是的，這是正確的。 –

你爲什麼不使用同樣的方法，你的charDiv做的就是IMG？只需給你的img一個ID，然後簡單地通過ID訪問它。否則，您將返回所有img元素的數組。

來源

2015-10-13 16:57:36 nameless

那麼，事情是，有元素不僅僅是圖像標籤更多的L1標籤下有動態改變。所有元素都必須針對特定字符進行更改。所以，我不想一個特定的ID添加到圖像標籤。 – TheRadVillager

您還可以使用：

function changeImage(){ 
     var imgTag = document.querySelector("#character1 img"); 

     imgTag.src = "new desired image path"; 
    } 

changeImage();

好像最簡單的方法，如果你不能，因爲某些原因，給一個id圖像。

演示： http://jsfiddle.net/ugw4q974/

來源

2015-10-13 16:59:54 sinisake

Javascript在頁面加載中不改變圖像源

回答

相關問題