जावास्क्रिप्ट रैंडम छवि खोना स्टाइलिंग

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; 

यह पृष्ठ लोड पर काम करता है हालांकि मेरे सीएसएस शीट में परिभाषित शैलियों को ओवरराइट किया जाता है?

.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] का उपयोग किया क्योंकि केवल मुझे क्वेरी नहीं मिल सका काम करने के लिए चयनकर्ता। क्वेरी SEElector के साथ मैंने इसे कैसे लिखा होगा?

Answer 1

जावास्क्रिप्ट का उपयोग कर style.background संपत्ति को बदलकर सभी पृष्ठभूमि गुणों (background-size सहित) को रीसेट करता है। आप केवल अपने सीएसएस में परिभाषित अन्य पृष्ठभूमि शैलियों को रखने के लिए जावास्क्रिप्ट का उपयोग कर backgroundImage संपत्ति को बदलना चाहते हैं।

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>