Question

我有一个图像数组图像，其中包含四个随机图像

我想使用JavaScript更改类 contents 的CSS样式的背景图像。

为此，我创建了 buildimage 和 changeImage ，并在onclick上尝试对其进行了更改。

我该如何实现？

var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;

function buildImage() {
  var img = document.createElement('img');
  img.src = images[index];
  document.getElementById('content').style.background - image = (img);
}

function changeImage() {
  var img = document.getElementById('content').getElementsByTagName('img')[0];
  index++;
  index = index % 4; // This is for if this is the last image then goto first image I have 4 images so I've given 4 change accordingly 
  img.src = images[index];
}

.contents {
  width: 100px;
  height: 100px;
  border: 2px solid #FF0000;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </style>
</head>

<body onload="buildImage();">
  <div class="contents" id="content"></div>
  <button onclick="changeImage()">NextImage</button>
</body>

</html>

Answer 1

更改

document.getElementById('content').style.background - image = (img);

收件人：

document.getElementById('content').style.backgroundImage = (img);

在js中，您必须将-之后的第一个字符更改为大写。例如：

在CSS中：border-style

在js中：borderStyle

Answer 2

变量/属性名称中不能包含连字符（解释器会将其视为“减”，但这没有意义）。 JavaScript DOM API中background-image的对应属性为backgroundImage：

function buildImage() {
  var img = document.createElement('img');
  img.src = images[index];
  document.getElementById('content').style.backgroundImage = (img);
}

Answer 3

问题：

您无需创建img标签即可在其中应用background-image CSS样式
您仅应用图片路径

解决方案：您需要在URL()之间应用图像路径，就像普通的CSS背景图片适用

检查以下代码：

var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;

function buildImage() {
    document.getElementById('content').style.backgroundImage = 'url('+images[index]+')';
}

function changeImage() {
    index++;
    if (index >= images.length) index = 0;
    document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}

.contents {
    width: 200px;
    height: 200px;
    border: 2px solid #FF0000;
}

<div class="contents" id="content"></div>
<button onclick="changeImage()">NextImage</button>

使用javascript更改css背景图像

3 个答案: