JavaScript实现点击缩略图弹出大图
时间：2026-01-27 16:30:50 254浏览 收藏
小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript 实现缩略图点击显示到模态框》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！
本文详解因 DOM 元素选择错误导致 `img.src` 为 null 的常见问题，指出误选外层 div 而非 img 标签是根本原因，并提供简洁可靠的修复方案与完整可运行代码。
在实现“点击缩略图，将其图片显示在模态框”这一交互时，一个高频出错点是：JavaScript 中获取到的元素并非 标签本身，而是其父容器（如
），从而导致调用 .src 或 getAttribute('src') 时返回 null —— 因为
元素没有 src 属性。
回顾原始代码：
const project_img = document.querySelectorAll(".project_img");
project_img.forEach((img) => {
img.addEventListener("click", function () {
modal_img.setAttribute("src", img.getAttribute("src")); // ❌ img 是 div，无 src 属性
});
});此处 img 实际指向的是
，而真正的 ![]()
是它的子元素。因此 img.getAttribute("src") 必然返回 null。方案一（推荐）：将 class 移至
✅ 正确做法是让选择器精准命中 元素。推荐两种方案：
方案一（推荐）：将 class 移至 ![]()
标签上
修改 HTML，把 class="project_img" 从
移到 ![]()
：
<div class="gallery_box"> <div><img class="project_img" src="./images/projects/46.jpg"></div> <div><img class="project_img" src="./images/projects/45.jpg"></div> <div><img class="project_img" src="./images/projects/44.jpg"></div> </div>
JS 保持不变即可正常工作：
const modal = document.querySelector(".modal_section");
const modal_img = document.querySelector(".b_p_modal");
const project_img = document.querySelectorAll(".project_img"); // ✅ 现在选中的是 img 元素
const close = document.querySelector(".modal_close");
project_img.forEach(img => {
img.addEventListener("click", () => {
modal_img.src = img.src; // ✅ img 是原生 HTMLImageElement，src 可读可写
modal.classList.add("visible");
});
});
close.addEventListener("click", () => {
modal.classList.remove("visible");
});方案二（兼容旧结构）：通过子元素查找
若无法修改 HTML 结构，可在事件处理中显式获取子 ：
project_img.forEach(div => {
const img = div.querySelector("img");
if (img) {
div.addEventListener("click", () => {
modal_img.src = img.src;
modal.classList.add("visible");
});
}
});⚠️ 注意事项：
- 避免在未确保元素存在的情况下直接访问属性（建议加 if (img) 判断）；
- 使用 modal_img.src = img.src 比 setAttribute("src", ...) 更语义清晰且兼容性更好；
- 确保模态框 DOM 在脚本执行前已加载（推荐将 JS 放在
