我们如何在网页中的循环 img 中更改背景 - Javascript

在网页中，循环img标签并更改其背景是一项非常常见的任务，尤其是在大型网站上。在Javascript中，我们可以通过使用循环和CSS的属性来完成它。以下是一些方法：

方法一：使用for循环和style属性来更改背景

在这种方法中，我们将使用for循环来循环所有的img标签，并使用style属性设置它们的背景。以下代码片段展示了这种方法：

let images = document.getElementsByTagName('img');

for (let i = 0; i < images.length; i++) {
  images[i].style.backgroundImage = 'url(' + images[i].src + ')';
}

在上面的代码中，我们首先获取网页上所有的img元素，并将它们存储在一个名为images的变量中。然后，我们使用for循环来遍历每个img元素，并使用style属性来更改它们的背景。我们使用img元素的src属性来设置背景图片的URL。

方法二：使用forEach方法和classList属性来更改背景

在这种方法中，我们将使用forEach方法来循环img标签，并使用classList属性来添加CSS类。以下代码片段展示了这种方法：

let images = document.getElementsByTagName('img');

Array.prototype.forEach.call(images, function(image) {
  image.classList.add('bg-image');
});

在上面的代码中，我们首先获取网页上所有的img元素，并将它们存储在一个名为images的变量中。然后，我们使用Array.prototype.forEach.call方法来循环每个img元素，并使用classList属性来添加一个名为bg-image的CSS类。

接下来，在CSS文件中，我们可以为bg-image类设置背景图片，如下所示：

.bg-image {
  background-image: url('your-image-url');
}

在这个CSS文件中，我们为bg-image类设置了背景图片，它将被应用于在JavaScript中添加bg-image类的所有img元素。

在这两个方法中，我们都使用了JavaScript来循环img元素并更改它们的背景。这可以让我们轻松地对大量的img元素进行操作，而不必手动更改它们的样式。