Question

我已经编写了一个代码来改变每天的背景。如果我将它应用于整个身体，它的工作正常，但当我试图把它放在一个div，它不工作。请查看我的代码并指导我完成错误。

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

Answer 1

它是document.getElementById('id')而不是你正在使用的。

在MDN

了解详情

Answer 2

哇，这里有很多错误 - 无论是拼写还是基本方法。

他们是：

您需要使用document.getElementById
您需要设置document.getElementById('ship').className（不是document.getElementById('ship').style.backgroundImage.className）
您需要确保将css类的名称更改为nighta或更改代码，以便将其设置为night

这样做，如果你现在处于夜间，你会看到一个带有少量云的黑色背景。

像这样： enter image description here

[编辑：已添加代码]

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

Answer 3

我已经注释掉了JS代码，在每个代码下面你可以看到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>

来源： W3Schools - Style backgroundImage Property，StackOverflow - Change an element's CSS class with JavaScript，W3Schools - jQuery - Get and Set CSS Classes

document.elementbyid函数在div中不起作用

3 个答案: