每次頁面刷新時更改div的背景圖像
[英]Change background-image of a div everytime page refresh
問題描述
根據我在互聯網上看到的內容，每次使用此javascript腳本刷新頁面時，我都應該能夠更改div的背景圖像。 由於某種原因，它不起作用。 任何幫助將不勝感激。
這個HTML
<div class="home-intro show-for-medium-up" id="home-intro">
</div>
這是CSS
.home-intro{
background-image: url("../images/1.png");
background-color:grey;
height:500px;
color:$white;
text-align:center;
}
這是js
<script>
function randomImage(){
var images = [
'../images/1.png',
'../images/2.png',
'../images/3.png'];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
var element = document.getElementsByClassName('home-intro');
console.log(element);
element[0].style["background-image"] = "url("+ images[x] + ") no-repeat;";
}
document.addEventListener("DOMContentLoaded", randomImage);
3 個解決方案
解決方案1
3 2015-07-07 20:02:28
唯一的問題是您試圖設置background-image屬性的no-repeat屬性。 不重復是background屬性的一個屬性。
解決方案2
0 2015-07-07 19:41:53
我會做
<body onload="randomImage()">`
和使用
var x=Math.floor(size * Math.random());
在
document.getElementById("home-intro").style.backgroundImage = "../images/" + x + ".png";
編輯：
或jQuery
$(function(){
var x=Math.floor(size * Math.random());
$('#home-intro').css('backgroundImage', '../images/' + x + '.png');
});
解決方案3
0 2019-05-23 04:41:12
您需要為樣式添加高度。
function randomImage(){
var images = ["./hanuman.png","./jesus.jpg","./hanuman.png"];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
document.getElementById("homeintro").style.height="1000px";
document.getElementById("homeintro").style.backgroundImage =
"url("+images[x] +")";
}
動態變化 <div> 用javascript的背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.