如何通过Javascript函数更改不同div的背景图像？

Question

Here is my HTML:

<link href="styles.css" rel=stylesheet>

 <title>
 Gallery 
 </title>
</head>
 <body>
<div class="master"> 
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
...

CSS: CSS：

.bg1{
height: 100%;
background-image: url("assets/pi/file-1.jpg");
background-size: contain;
margin: auto;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
max-height:100%;
max-width: 100%;
}
.bg2{
height: 100%;
background-image: url("assets/pi/file-2.jpg");
background-size: contain;
margin: auto;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
max-height:100%;
max-width: 100%;
}
...

Javascript (at the end of html before /body): Javascript（在/ body之前的html末尾）：

<script type="text/javascript">
        function genBg() {

var randomNum;
var imagePath = new Array(359);  //array to hold the image filenames


for (int i=1; i<=359; i++){
    imagePath[i]= '\"assets/pi/file-'+i+'.jpg\"';// files are named as 
                                                 //'file-1, file-2..so 
                                                //this loop stores the
                                                //names in array




 randomNum = Math.floor(Math.random() * 359);

var background = imagePath[randomNum]; // takes a random filename and 
                                       //stores it in var background

document.getElementsByClassName("bg1").style.backgroundImage ='url(\"'+background+'\")';              //changes filename


}
   </script>

According to this code the background of div class = "bg1" should be random but it isnt working, it is taking the default background specified in the css file. 根据此代码，div class =“ bg1”的背景应该是随机的，但它不起作用，它采用的是css文件中指定的默认背景。 I want the function to overwrite that with a random filename 我希望函数使用随机文件名覆盖它

Answer 1

replace this : 替换为：

document.getElementsByClassName("bg1")

by 通过

 document.querySelector(".bg1")

and call the function 并调用函数

full code (i also corrected other errors) : 完整代码（我也纠正了其他错误）：

 function genBg() { var randomNum; var imagePath = new Array(359); //array to hold the image filenames for (var i = 1; i < 359; i++) { imagePath[i] = '"assets/pi/file-' + i + '.jpg"'; // files are named as } //'file-1, file-2..so //this loop stores the //names in array randomNum = Math.floor(Math.random() * 359); var background = imagePath[randomNum]; // takes a random filename and //stores it in var background document.querySelector(".bg1").style.backgroundImage = 'url(' + background + ')'; //changes filename //this line is for debug document.querySelector(".bg1").innerHTML = background; } genBg();

 .bg1 { height: 100%; background-image: url("assets/pi/file-1.jpg"); background-size: contain; margin: auto; background-attachment: fixed; background-repeat: no-repeat; background-position: center; max-height: 100%; max-width: 100%; width:200px; height:100px; border:1px solid #000; } .bg2 { height: 100%; background-image: url("assets/pi/file-2.jpg"); background-size: contain; margin: auto; background-attachment: fixed; background-repeat: no-repeat; background-position: center; max-height: 100%; max-width: 100%; }

 <div class="master"> <div class="bg1"></div> <div class="bg2"></div> <div class="bg3"></div> </div>

如何通过Javascript函数更改不同div的背景图像？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-24 18:18:28

如何通过Javascript函数更改不同div的背景图像？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-24 18:18:28

解决方案1
0 已采纳 2017-09-24 18:18:28