Loading a background-color for a div when page is loaded

Question

I wrote a simple code where I'm trying to load a background-color to a div when page loads. Here is the code:

<div id="offerOne">
    <img src="images/images.jpg" class="img-responsive center-block" alt="img">
</div>  

Javascript:

<script type="text/javascript">
    $('#offerOne').attr('style', 'background-color: #f12 !important');
</script>  

But this isn't loading background-color for div when page loads. How can I do it?

Answer 1

You should put your code inside Dom ready,

$(function(){
  $('#offerOne').attr('style', 'background-color: #f12 !important');
})

Answer 2

 $('#offerOne').css('background-color', '#f12'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="offerOne"> <img src="images/images.jpg" class="img-responsive center-block" alt="img"> </div> 

try

Answer 3

use

$(document).ready(function() {
    // your code 
});