本教程旨在帮助开发者实现在点击图片时，动态地显示该图片的 alt 属性文本。我们将通过 JavaScript 代码示例，详细讲解如何获取图片的 alt 属性，并将其插入到图片下方，实现交互式用户体验。本教程提供完整的代码示例和在线演示，方便读者理解和实践。
实现原理
核心思路是利用 JavaScript 监听图片的点击事件，在事件处理函数中获取被点击图片的 alt 属性值，然后动态创建一个新的 HTML 元素（例如 <p> 标签），将 alt 属性值设置为该元素的文本内容，最后将该元素插入到图片下方。
具体步骤
-
HTML 结构准备：
首先，我们需要一个包含图片的 HTML 结构。确保图片标签包含 alt 属性，并为其赋予适当的文本描述。例如：
立即学习“Java免费学习笔记（深入）”；
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="showAlt(this);">
注意：onclick="showAlt(this);" 这部分代码将在图片被点击时调用 showAlt 函数，并将当前图片对象 this 作为参数传递给该函数。
-
JavaScript 函数编写：
接下来，编写 JavaScript 函数 showAlt，该函数接收一个图片元素作为参数，并执行以下操作：
function showAlt(imgNode) { const altNode = document.createElement("p"); // 创建一个新的 <p> 元素 altNode.innerHTML = imgNode.alt; // 将图片的 alt 属性值赋给 <p> 元素的文本内容 imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling); // 将 <p> 元素插入到图片下方 }代码解释：
- document.createElement("p"): 创建一个新的 <p> 元素，用于显示 alt 文本。
- altNode.innerHTML = imgNode.alt: 将传入的图片节点的 alt 属性值赋值给新创建的 <p> 元素的 innerHTML 属性，从而将 alt 文本显示在新元素中。
- imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling): 这行代码是关键。它将新创建的 <p> 元素插入到 DOM 树中，使其显示在图片下方。
- imgNode.parentNode：获取图片节点的父节点。
- imgNode.nextSibling：获取图片节点的下一个兄弟节点。如果图片是父节点的最后一个子节点，则 imgNode.nextSibling 为 null。
- insertBefore(altNode, imgNode.nextSibling)：将 altNode 插入到 imgNode.nextSibling 之前。如果 imgNode.nextSibling 为 null，则 altNode 将被插入到父节点的末尾，即图片下方。
-
完整 HTML 代码示例：
将上述 HTML 结构和 JavaScript 代码整合在一起，得到一个完整的 HTML 页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show Alt Text on Click</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <section class="container"> <div class="thumbnailContainer"> <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="showAlt(this);"> </div> </section> <script> function showAlt(imgNode) { const altNode = document.createElement("p"); altNode.innerHTML = imgNode.alt; imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling); } </script> </body> </html> -
在线演示：
您可以访问以下 JSFiddle 链接查看在线演示：https://www.php.cn/link/9c68bf8965e0692b91ef2f048cea8378
注意事项
- 确保图片标签包含 alt 属性，并且 alt 属性值能够准确描述图片内容，这不仅有利于用户体验，也有利于搜索引擎优化。
- 上述代码会在每次点击图片时都创建一个新的 <p> 元素。 如果需要实现点击后只显示一次 alt 文本，可以添加逻辑判断，例如检查图片下方是否已经存在 alt 文本元素，如果存在则不再创建新的元素。
- 可以根据实际需求，调整 alt 文本的样式，例如修改字体大小、颜色、背景等。
- 如果需要支持更多的浏览器兼容性，可以考虑使用更通用的 JavaScript 代码写法。
总结
通过本教程，我们学习了如何使用 JavaScript 实现点击图片显示 alt 文本的功能。 这个功能可以提升用户体验，尤其是在图片无法加载或者需要提供额外信息的情况下。 掌握这个技巧，可以将其应用到各种 Web 项目中，提升网站的交互性和可用性。
