使用 javascript 更改 css 背景图像 [英] Change css background-Image using javascript
本文介绍了使用 javascript 更改 css 背景图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个图像数组 images 有四个随机图像,
我想使用 javascript 更改 contents 类的 css 样式中的 background-image.
为此,我创建了 buildimage 和 changeImage 并在 onclick 上尝试更改它.
我怎样才能实现它?
var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];无功指数 = 0;函数 buildImage() {var img = document.createElement('img');img.src = 图像[索引];document.getElementById('content').style.background - image = (img);}函数更改图像(){var img = document.getElementById('content').getElementsByTagName('img')[0];指数++;指数 = 指数 % 4;//这是因为如果这是最后一张图像然后转到第一张图像我有 4 张图像所以我相应地给出了 4 个更改img.src = 图像[索引];}
.contents {宽度:100px;高度:100px;边框:2px 实心 #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"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></风格>头部><body onload="buildImage();"><div class="contents" id="content"></div><button onclick="changeImage()">NextImage</button>