点击图片显示 Alt 文本：一个 JavaScript 教程-html教程-PHP中文网

点击图片显示 Alt 文本：一个 JavaScript 教程

花韻仙語

发布： 2025-09-21 18:20:01

原创

533人浏览过

点击图片显示 alt 文本：一个 javascript 教程

本教程旨在帮助开发者实现在点击图片时，动态地显示该图片的 alt 属性文本。我们将通过 JavaScript 代码示例，详细讲解如何获取图片的 alt 属性，并将其插入到图片下方，实现交互式用户体验。本教程提供完整的代码示例和在线演示，方便读者理解和实践。

实现原理

核心思路是利用 JavaScript 监听图片的点击事件，在事件处理函数中获取被点击图片的 alt 属性值，然后动态创建一个新的 HTML 元素（例如 标签），将 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，该函数接收一个图片元素作为参数，并执行以下操作：

芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情
```
function showAlt(imgNode) {
 const altNode = document.createElement("p"); // 创建一个新的 元素
 altNode.innerHTML = imgNode.alt; // 将图片的 alt 属性值赋给 元素的文本内容

 imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling); // 将 元素插入到图片下方
}
```
登录后复制
代码解释：
- document.createElement("p"): 创建一个新的 元素，用于显示 alt 文本。
- altNode.innerHTML = imgNode.alt: 将传入的图片节点的 alt 属性值赋值给新创建的 元素的 innerHTML 属性，从而将 alt 文本显示在新元素中。
- imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling): 这行代码是关键。它将新创建的 元素插入到 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 属性值能够准确描述图片内容，这不仅有利于用户体验，也有利于搜索引擎优化。
上述代码会在每次点击图片时都创建一个新的 元素。如果需要实现点击后只显示一次 alt 文本，可以添加逻辑判断，例如检查图片下方是否已经存在 alt 文本元素，如果存在则不再创建新的元素。
可以根据实际需求，调整 alt 文本的样式，例如修改字体大小、颜色、背景等。
如果需要支持更多的浏览器兼容性，可以考虑使用更通用的 JavaScript 代码写法。