document.elementbyid函數不能在div中工作

-6

我寫了一個代碼來改變背景，因爲每天的時間。如果我將它應用於整個身體，它的工作正常，但是當我試圖將它放入一個div中時，它不起作用。請參閱我的代碼並指導我解決錯誤。document.elementbyid函數不能在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>

來源

2014-07-05 Shail

使用'document.getElementById'不'document.elementById' –

爲什麼不使用jQuery庫，因爲它是故意的嗎？ '$（「＃ship」）' –

_什麼是錯誤？此外，這不是「引導你度過錯誤」的地方。你需要一個會話場所，比如聊天室或討論區。堆棧溢出是一個問答，更像是一個常見問題解答。 –

哇，這裏的錯誤相當數量更多關於它 - 無論是在拼寫和基本方法。

它們是：

你需要使用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>

來源

2014-07-05 15:00:50 enhzflep

我做了你提到的改變，但仍然導致,,,一個空格div – Shail

@Shail - 你不能我已經做出了這些改變，它可以工作，或者你錯過了某些東西，或者你的瀏覽器屬於馬桶，我已經用工作副本更新了我的答案。已經減少了你的js函數中的代碼的大小。:) – enhzflep

是的，現在它的工作..非常感謝。我希望畫面會隨着日出而改變。 :) – Shail

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

瞭解在MDN

來源

2014-07-05 14:48:44

...然後忘掉它並使用jQuery函數 –

我註釋掉的代碼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

來源

2014-07-05 15:24:02 Hamed

@哈米德 - 嘗試過，但仍然沒有結果 – Shail

@海爾，你在本地運行你的文件？嘗試在head標籤中的JQuery源代碼之前添加'http：'！ – Hamed

其工作noe哈姆斯，非常感謝您的幫助 – Shail

document.elementbyid函數不能在div中工作

回答

相關問題