在 JavaScript 中，如何动态地改变 ＜img＞ 标签的 src 属性来加载不同的图片？

在JavaScript中，动态改变<img>标签的src属性是一种常见的操作，通常用于在用户交互或某些事件触发时加载不同的图片。以下是如何实现这一功能的步骤：

1. HTML结构

首先，你需要一个<img>标签在HTML中，例如：

<img id="myImage" src="initial.jpg" alt="Initial Image">

这里，id="myImage"用于在JavaScript中引用这个<img>元素。

2. JavaScript代码

然后，你可以使用JavaScript来改变这个<img>元素的src属性。这可以通过直接修改元素的属性来实现。

示例1：使用内联事件处理器

你可以直接在HTML元素中使用onclick属性来改变图片：

<img id="myImage" src="initial.jpg" alt="Initial Image" onclick="changeImage()">

然后在JavaScript中定义changeImage函数：

function changeImage() {
    var img = document.getElementById('myImage');
    img.src = "new-image.jpg";  // 将图片更换为 new-image.jpg
}

示例2：使用按钮触发

如果你想要通过点击一个按钮来更换图片，可以这样做：

<img id="myImage" src="initial.jpg" alt="Initial Image">
<button onclick="changeImage()">Change Image</button>

JavaScript函数保持不变：

function changeImage() {
    var img = document.getElementById('myImage');
    img.src = "new-image.jpg";  // 将图片更换为 new-image.jpg
}

3. 更复杂的逻辑

如果你想根据某些条件来更换图片，可以在changeImage函数中添加更多的逻辑：

function changeImage() {
    var img = document.getElementById('myImage');
    var currentSrc = img.src;
    
    if (currentSrc === "initial.jpg") {
        img.src = "new-image.jpg";
    } else {
        img.src = "initial.jpg";
    }
}

这个函数会检查当前的src属性，并根据当前显示的图片来更换为另一张图片。

4. 使用事件监听器

更现代和推荐的做法是使用addEventListener来添加事件监听器，而不是在HTML元素中直接使用onclick：

document.getElementById('myButton').addEventListener('click', function() {
    var img = document.getElementById('myImage');
    img.src = "new-image.jpg";
});

这种方法更符合现代Web开发的标准，因为它将JavaScript代码和HTML结构分离，提高了代码的可维护性。

以上就是在JavaScript中动态改变<img>标签的src属性来加载不同图片的几种方法。