如何通过元素 ID 实现图片切换（JavaScript 教程）-js教程-PHP中文网

本文详解如何使用 JavaScript 的 getElementById() 正确交换两张图片的 src 属性，避免因误赋对象而非字符串导致的图片加载失败问题。

本文详解如何使用 javascript 的 `getelementbyid()` 正确交换两张图片的 `src` 属性，避免因误赋对象而非字符串导致的图片加载失败问题。

在 JavaScript 中，通过元素 ID 操作 DOM 是基础且高频的操作。但初学者常犯的一个典型错误是：将 DOM 元素对象直接赋值给 src 属性，而非其 src 属性的字符串值。这正是原代码无法正常显示图片的根本原因。

回顾原始代码：

@@##@@
@@##@@

<script>
function SwitchImg1() {
  document.getElementById("MarioImg").src = document.getElementById("Img_1");
  // ❌ 错误：右侧是 @@##@@ 元素对象，不是 URL 字符串！
}
</script>

document.getElementById("Img_1") 返回的是一个 DOM 元素对象，而 src 属性只接受字符串格式的图片 URL。当把整个对象赋给 src 时，浏览器会尝试将其隐式转换为字符串（如 "[object HTMLImageElement]"），最终导致无效路径——这就是你看到“白绿纸片”（即默认的 broken image 占位符）的原因。

✅ 正确做法是：显式获取并交换两个元素的 .src 字符串值。以下是推荐的健壮实现：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

@@##@@

@@##@@

<script>
function switchImages() {
  const mainImg = document.getElementById("MarioImg");
  const sideImg = document.getElementById("Img_1");

  // ✅ 安全交换：临时存储 src 值（字符串）
  const tempSrc = mainImg.src;
  mainImg.src = sideImg.src;
  sideImg.src = tempSrc;
}
</script>

? 关键要点与最佳实践：

✅ 始终访问 .src 属性（element.src）来读取或设置图片地址，而非元素本身；
✅ 使用 const 声明 DOM 引用，提升可读性与性能；
✅ 添加 alt 属性增强可访问性；
⚠️ 避免内联事件（如 onclick），推荐采用 addEventListener 解耦逻辑（进阶建议）：
```
document.getElementById("Img_1").addEventListener("click", switchImages);
```

? 小结：DOM 操作的核心在于区分元素对象与其属性值。getElementById() 返回对象，而图片切换依赖的是该对象的 src 字符串属性——理解这一区别，是写出可靠交互代码的第一步。