js设置img的src方法

在网页开发中，经常需要通过JavaScript来动态设置img标签的src属性，以实现图片的动态加载、切换等功能。下面将介绍几种常见的js设置img的src方法。

方法一：通过id获取元素并设置src属性

这是最基本的一种方法。在HTML中给img标签设置一个唯一的id，例如：

<img id="myImage" src="default.jpg">

然后在JavaScript中，通过document.getElementById方法获取该img元素，并修改其src属性：

var img = document.getElementById('myImage');
img.src = 'new.jpg';

这种方法简单直接，适用于单个img元素的操作。

方法二：通过类名获取元素并设置src属性

当页面中有多个img元素需要统一设置src属性时，可以通过类名来获取这些元素。例如：

<img class="myImages" src="default1.jpg">
<img class="myImages" src="default2.jpg">

在JavaScript中，可以使用document.getElementsByClassName方法获取元素集合，然后遍历集合来设置src属性：

var images = document.getElementsByClassName('myImages');
for (var i = 0; i < images.length; i++) {
    images[i].src = 'new.jpg';
}

方法三：使用事件触发设置src属性

可以通过用户的操作事件，如点击按钮等，来触发设置img的src属性。例如：

<button onclick="changeImage()">切换图片</button>
<img id="changeImg" src="default.jpg">

function changeImage() {
    var img = document.getElementById('changeImg');
    img.src = 'new.jpg';
}

这种方法可以根据用户的交互来动态改变图片。

方法四：通过创建新的img元素并设置src属性

还可以通过JavaScript动态创建img元素，并设置其src属性，然后将其添加到页面中。例如：

var newImg = document.createElement('img');
newImg.src = 'new.jpg';
document.body.appendChild(newImg);

以上就是几种常见的js设置img的src方法，开发者可以根据实际需求选择合适的方法来实现图片的动态操作。