Npcink Blog
切换菜单

JS 修改 img 的 src - JS 笔记

实战方法，用 js 修改 img 的 src

最后更新于
本页目录4 节

业务中有一个需求，使用 JS 更改某 img 的 src,在网络上找了些方法。

网络上的方法：

核心代码

<img id="myImage" src="compman.gif">
document.getElementById("myImage").src="hackanm.gif";

例子：

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<img id="n-myImage" src="https://n.getimg.net/www/2020/12/392949.png" width="107" height="98">
    <br><br>
    <input type="button" onclick="changeSrc()" value="修改一次">
    <script>
        function changeSrc() {
            document.getElementById("n-myImage").src = "https://n.getimg.net/www/2020/12/373892.png";
        }
    </script>

可刷新本页重复体验效果

实战

但在实际情况中，我们的代码结构可能是这样的：

<div class="logo">
<h2>
<a rel="home" href="#">
<img src="https://n.getimg.net/www/2020/12/392949.png">
</a>
</h2>
</div>

这是一个经典的 LOGO 结构，这个时候，我们没有 ID 了，该咋办呢？

这个时候，我们可以用 document.querySelector 方法，如下：

 document.querySelector(".logo h1 img").src = "#";

例子

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<div class="logo">
        <h2>
            <a rel="home" href="#">
                <img src="https://n.getimg.net/www/2020/12/392949.png" width="107" height="98">
            </a>
        </h2>
    </div>




    <br><br>
    <input type="button" onclick="n_changeSrc()" value="更换一次">
    <script>
        function n_changeSrc() {
            document.querySelector(".logo h1 img").src = "https://n.getimg.net/www/2020/12/373892.png";
        }
    </script>