document.elementbyid函数在div中不起作用[关闭]

I have written a code to change the background as per day time. If i am applying it to whole body, its working fine but when i am trying to put it inside a div,its not working. Please see my code and guide me through the error.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
/*reset*/ h1,h4 {margin:0;}
/* basic styles */
h1 { margin-bottom: 10px; }
div { 
width: 680px;
padding: 10px 25px;
margin: 50px auto;
border-radius: 7px;
background: rgba(255, 255, 255, 0.4); 
color: #1F1F1F;
}

/* backgrounds */
.day { background: url('http://imgs.mi9.com/uploads/photography/4480/white-clouds-and-          blue-sky_1600x1200_78556.jpg'); }
.sunset { background:   url('http://www.naturewallpaper.eu/desktopwallpapers/sky/1366x768/after-sunset-sky-  1366x768.jpg'); }
.night { background: url('http://images2.layoutsparks.com/1/159946/moon-girl-night- sky.jpg'); }
#ship{width:60%; height:100px; border:#30C 1px solid;}
</style>
</head>

<body>
<div id="ship">
<script>
$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if (n > 19 || n < 6)
 // If time is after 7PM or before 6AM, apply night theme to ‘body’
  document.elementById('ship').style.backgroundImage.className = "nighta";
else if (n > 16 && n < 19)
  // If time is between 4PM – 7PM sunset theme to ‘body’
  document.elementById('ship').style.backgroundImage.className = "sunset";
else
  // Else use ‘day’ theme
  document.elementById('ship').style.backgroundImage.className = "day";
});

</script>
</div>
</body>
</html>

Wow, quite the number of errors here - both in spelling and basic approach.

They are:

  1. you need to use document.getElementById
  2. you need to set document.getElementById('ship').className (not document.getElementById('ship').style.backgroundImage.className )
  3. you need to ensure that you change the name of the css class to nighta or change your code so that it sets it to night

Do this, and if you're in a night-time period currently, you'll see a black background with a few clouds.

Like this: enter image description here

[edit: code added]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
/*reset*/ h1,h4 {margin:0;}
/* basic styles */
h1 { margin-bottom: 10px; }
div { 
width: 680px;
padding: 10px 25px;
margin: 50px auto;
border-radius: 7px;
background: rgba(255, 255, 255, 0.4); 
color: #1F1F1F;
}

/* backgrounds */
.day { background: url('http://imgs.mi9.com/uploads/photography/4480/white-clouds-and-          blue-sky_1600x1200_78556.jpg'); }
.sunset { background:   url('http://www.naturewallpaper.eu/desktopwallpapers/sky/1366x768/after-sunset-sky-  1366x768.jpg'); }
.night { background: url('http://images2.layoutsparks.com/1/159946/moon-girl-night- sky.jpg'); }
#ship{width:60%; height:100px; border:#30C 1px solid;}
</style>
</head>

<body>
<div id="ship">
<script>
window.addEventListener('load', onPageLoaded, false);

function onPageLoaded()
{
    var d = new Date();
    var n = d.getHours();
    var className;
    if (n > 19 || n < 6)
        className = "night";
    else if ((n > 16) && (n < 19))
        className = "sunset";
    else
        className = "day";

    document.getElementById("ship").className = className;
}

</script>
</div>
</body>
</html>

It is document.getElementById('id') and not what you are using.

Learn more about it at MDN

I have commented out the JS codes and underneath each you can see an equivalent in jQuery.

<script>
$(document).ready(function(){
  var d = new Date();
  var n = d.getHours();
  if (n > 19 || n < 6)
     // If time is after 7PM or before 6AM, apply night theme to ‘body’
     // document.getElementById('ship').className = "night";
       $("#Ship").toggleClass("night");
  else if (n > 16 && n < 19)
     // If time is between 4PM – 7PM sunset theme to ‘body’
    // document.getElementById('ship').className = "sunset";
       $("#ship").toggleClass("sunset");
 else
    // Else use ‘day’ theme
    // document.getElementById('ship').className = "day";
      $("#ship").toggleClass("day");
});  
</script>

Sources: W3Schools - Style backgroundImage Property, StackOverflow - Change an element's CSS class with JavaScript, W3Schools - jQuery - Get and Set CSS Classes