Question

我对javascript很新。我试图在页面加载时更改图像源。我不知道为什么这不起作用。有人可以请我提供一些见解吗？这是我的HTML代码：

＆＃13;

<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>

＆＃13;

Answer 1

getElementsByTagName("img")将为您提供一系列<img>元素。在这种情况下，您只需访问该数组charDiv.getElementsByTagName('img')[0]中唯一的图像元素：

＆＃13;

<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>

＆＃13;

Answer 2

您也可以使用：

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

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

changeImage();

似乎最简单的方式，如果由于某种原因，您可以为图片提供ID 。

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

Answer 3

为什么不使用与$ bash -x exitstuck.sh + logfile=./testQuit_log + rm ./testQuit_log ++ foo p1 p2 ++ '[' 2 -ne 1 ']' ++ echo 'foo error' ++ log ++ read data ++ echo -e 'foo error' ++ tee -a ./testQuit_log ++ quit ++ echo quit ++ log ++ read data ++ echo -e quit ++ tee -a ./testQuit_log ++ exit 1 + var='foo error quit' + '[' 1 -eq 1 ']' + exit相同的方法来获取img？只需提供您的charDiv ID，然后只需通过ID访问即可。否则，您将获得所有img - 元素的数组。

Javascript不会在页面加载时更改图像源

3 个答案: