How does one change the colour of a div based on current time?
Question
I have javascript code that converts the color of the body based on current time but I need it to change the color of a div instead. I am not knowledgeable enough in javascript to know how to do this. I know I need to add a div to the html. The main code is bigger but I've just pulled the basics to get it to work.
Javascript
function emea() {
var d = new Date();
var n = d.getUTCHours()+1;
if (n > 18 || n < 9) {
// If time is after 6PM or before 9AM, apply night theme to 'body'
document.body.className = "emeanight";
}
else {
// Else use ‘day’ theme
document.body.className = "emeaday";
}
}
$(document).ready(function() {
emea();
});
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href='tz.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<title>TZ TEST</title>
</head>
<body>
<script src='tz.js'></script>
</body>
</html>
CSS
.emeaday
{
background-color:green;
}
.emeanight
{
background-color:blue;
}
I have tried variations of document.getelementbyid but I keep hitting a blank.
6 answers
solution1
1 ACCPTED 2014-08-06 18:40:13
To expand on @Hazzard's comment, you can also use jQuery to select your div by ID or whatever:
function emea() {
var d = new Date();
var n = d.getUTCHours() + 1;
if (n > 18 || n < 9) {
// If time is after 6PM or before 9AM, apply night theme to 'body'
$("#foo").addClass("emeanight").removeClass("emeaday");
} else {
// Else use ‘day’ theme
$("#foo").addClass("emeaday").removeClass("emeanight");
}
}
$(document).ready(function () {
emea();
});
solution2
0 2014-08-06 18:39:58
You just need to get a reference to the element in javascript then apply your code. Try using document.getElementById() if your div has an ID. You could also use document.querySelector() passing the div's selectors to it.
solution3
0 2014-08-06 18:40:40
Since you are already using jQuery, you don't need to use plain javascript to target your div. You can use $('#ID') to select the div you wish to change, and then call jQuery functions to change its class.
function emea(){ var d = new Date(); var n = d.getUTCHours()+1; var divToChange = $('#divId'); if (n > 18 || n < 9) // If time is after 6PM or before 9AM, apply night theme to 'body' divToChange.removeClass("emeaday").addClass("emeanight"); else // Else use 'day' theme divToChange.removeClass("emeanight").addClass("emeanight"); }
solution4
0 2014-08-06 18:40:44
Use addClass(className) . you can read more about addclass http://api.jquery.com/addclass/
Even you can make use of toggleClass(classname) , here is the link for it http://api.jquery.com/toggleclass/
solution5
0 2014-08-06 18:56:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href='tz.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<title>TZ TEST</title>
<style type="text/css">
.emeaday { background-color:green; }
.emeanight { background-color:blue; }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var h = new Date().getHours();
document.body.className = (9 > h || 18 < h) ? "emeanight" : "emeaday";
});
</script>
</body>
</html>
solution6
0 2014-08-06 18:59:29
If you wanted to use vanilla JS, you can get the div element like so:
Add a div in your html body with an id (might be easier to see if you set a height/width for the div):
<div id='test'>Hello<div>
JS:
function emea(){
var d = new Date();
var n = d.getUTCHours()+1;
if (n > 18 || n < 9) {
// If time is after 6PM or before 9AM, apply night theme to 'body'
//document.body.className = "emeanight";
document.getElementById("test").className = 'emeanight';
}
else {
// Else use ‘day’ theme
//document.body.className = "emeaday";
document.getElementById("test").className = 'emeaday';
}
}
emea();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.