Javascriptの画像ランダムレンダリングのスタイルを失う

Question

私のジャンボトロンの背景画像をランダムに設定しようとしています。ここまで私がこれまで持っていたことがあります。

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; 
} 

これらのランダムイメージをロードし、他のスタイルを既に定義したままにする方法はありますか？

また、別の簡単な質問..私はqueryEelectorを動作させることができなかったため、getElementsByClassName [0]を使用しました。これをquerySelectorでどう書いていますか？

Answer 1

style.backgroundプロパティをJavaScript に変更すると、のすべての背景プロパティ（background-sizeも同様）がリセットされます。 backgroundImageプロパティをJavaScriptを使用して変更するだけで、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>