在“js”中怎么设置div的背景图片？

JavaScript012

在“js”中怎么设置div的背景图片？,第1张

有两种比较直接的方式，\x0d\x0a\x0d\x0a第一种方法：预先设置一个样式，然后在js中操作，给div加上这个class。\x0d\x0ahtml代码：\x0d\x0a-----\x0d\x0a\x0d\x0a\x0d\x0a-----\x0d\x0a\x0d\x0a预先设置一个样式：\x0d\x0a-----\x0d\x0a.bg {\x0d\x0a background-image: url(xxx.jpg)\x0d\x0a}\x0d\x0a-----\x0d\x0a\x0d\x0a然后js获取这个div，给div加上名为bg的class\x0d\x0a-----\x0d\x0avar div = document.getElementById('test')\x0d\x0adiv.className += ' bg'\x0d\x0a-----\x0d\x0a\x0d\x0a第二种方法，直接设置div的style属性：\x0d\x0a\x0d\x0a-----\x0d\x0avar div = document.getElementById('test')\x0d\x0adiv.style.backgroundImage = 'url(xxx.xxx)'\x0d\x0a----- 回答于 2022-11-16

1、用JS定义一个图片数组，里面存放你想要随机展示的图片

2、用JS产生一个随机数，当然这个随机数从0开始到imgArr.length-1结束

代码如下:

var index =parseInt(Math.random()*(imgArr.length-1))

就得到当前随机产生的图片

代码如下:

var currentImage=imgArr[index]

3、既然随机产生了一张背景图，那就用JS把这个图片作为背景图。

代码如下:

document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")"

由于这是一个demo，所以在页面上定义了一个id为BackgroundArea的div，同时也是为这个div设置随机背景的。

代码如下:

<div id="BackgroundArea">

</div>