Javascript随机图像丢失造型

试图为我的Jumbotron设置随机背景图像。这是我到目前为止。Javascript随机图像丢失造型

function randomImage() { 
    var images = [ 
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ", 
    "http://www.shunvmall.com/data/out/193/47120931-random-image.png", 
    "https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg" 
    ]; 
    var imgAmount = images.length 
    console.log(imgAmount); 
    var x = Math.floor(imgAmount * Math.random()) 
    console.log(x); 
    document.getElementsByClassName('jumbotron')[0].style.background = "url(" + images[x] + ") no-repeat center center fixed"; 
} 
window.onload = randomImage;

但是这个工程页面上加载在我的CSS表中定义的样式似乎被覆盖？

.container .jumbotron { 
    background: url(/static/images/banner-1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin-bottom: 0px; 
    border-radius: 0px; 
}

有没有一种方式来加载这些随机图像，并保持其他风格已经定义？

此外，另一个快速问题..我只使用getElementsByClassName [0]，因为我无法使querySelector工作。我怎么会用querySelector写这个？

来源

2017-02-22 Jesse

你可以发布一个可行的代码片段，与HTML？ –

那么，对于查询选择器来说，它看起来像这样：document.querySelector（'。jumbotron'） – user218046

@ user218046我要回复并说这是我尝试的第一件事！但现在起作用了，一定是错字。多么尴尬..谢谢！ – Jesse

使用JavaScript更改style.background属性重置所有背景属性（包括background-size以及）。您可能只想使用JavaScript来更改backgroundImage属性，以保持CSS中定义的其他背景样式。

document.querySelector('.jumbotron').style.backgroundImage = 'url(...)';

function randomImage() { 
 
    var images = [ 
 
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ", 
 
    "http://www.shunvmall.com/data/out/193/47120931-random-image.png", 
 
    "https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg" 
 
    ]; 
 
    var imgAmount = images.length; 
 
    var x = Math.floor(imgAmount * Math.random()); 
 
    document.querySelector('.jumbotron').style.backgroundImage = "url(" + images[x] + ")"; 
 
} 
 

 
window.onload = randomImage;

.container .jumbotron { 
 
    background: url(https://placehold.it/300x200) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 

 
    margin-bottom: 0px; 
 
    border-radius: 0px; 
 
    height: 200px; 
 
    border: 6px #000 solid; 
 
}

<div class="container"> 
 
    <div class="jumbotron"> 
 
    </div> 
 
</div>

来源

2017-02-22 05:13:32

太棒了！将.style.background更改为.style.backgroundImage完美。谁知道这么少会导致这样的悲伤。谢谢！ – Jesse

Javascript随机图像丢失造型

回答

相关问题