dongyizhui0616 2014-07-05 14:46
浏览 20
已采纳

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>
  • 写回答

3条回答 默认 最新

  • dream2891 2014-07-05 15:00
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 BP神经网络控制倒立摆
  • ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
  • ¥15 html5+css和javascript有人可以帮吗？图片要怎么插入代码里面啊
  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸，chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动，求出欧拉角
  • ¥20 Java-Oj-桌布的计算