javascript怎么改变图片地址-js教程-PHP中文网

首页

web前端

js教程

javascript怎么改变图片地址

Jan 19, 2022 am 11:57 AM

javascript

javascript改变图片地址的方法：1、使用“document.getElementById("id")”语句根据指定id值获取图片对象；2、使用“图片对象.setAttribute("src","新图片地址");”语句来改变图片地址。

javascript怎么改变图片地址

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript改变图片地址的方法

实现思想：

首先获取img图片对象（<img> 标签定义 HTML 页面中的图像。）
然后使用setAttribute()方法重新设置src属性的值即可（img 标签的 src 属性规定图像的 URL。）

setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。

实现代码：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;img id=&quot;img&quot; src=&quot;img/3.jpg&quot; width=&quot;300&quot;/&gt;&lt;br&gt;
        &lt;button onclick=&quot;myFunction()&quot;&gt;更改图片地址&lt;/button&gt;
        &lt;script&gt;
            function myFunction() {
                var img=document.getElementById(&quot;img&quot;);
                img.setAttribute(&quot;src&quot;,&quot;img/4.jpg&quot;);
            }
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;