I am using the following script, but I would like to apply it only to the first section of my site and not to the body. (the following code it's working but it applies underneath my #top section).
<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br>');
document.bgColor="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
document.write ('<body style="background-color: orange">');
}
//20-21 night
else if (hours > 19 && hours < 22){
document.write ('<body style="background-color: orangered">');
}
//22-4 night
else if (hours > 21 || hours < 5){
document.write ('<body style="background-color: #C0C0C0;">');
}
//9-17 day
else if (hours > 8 && hours < 18){
document.write ('<body style="background-color: #616D7E">');
}
//7-8 day
else if (hours > 6 && hours < 9){
document.write ('<body style="background-color: skyblue">');
}
//5-6 day
else if (hours > 4 && hours < 7){
document.write ('<body style="background-color: steelblue">');
}
else {
document.write ('<body style="background-color: white">');
}
</script>
The HTML part:
<section class="full-height section-scroll" id="top">
<div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<section class="intro-top">
<h1>This is my H1</h1>
</section>
</section>
And the CSS:
#top {
height: 100vh;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
transition: background-color 700ms linear;
background-color: rgba(253, 208, 7, 1);
justify-content: center;
}
#top.scrolled {
background-color: transparent
}
I have tried to change document.write ('<body style="background-color: orange">'); with document.getElementById("top").style.backgroundColor = "orange"; but still it doesn't work.
I can't comment on the post so i will just make it as an answer.
Are you putting the <script></script> on the top of the body / head? If so, move it to the bottom of your body / after the <div id="top">. Putting the script on head / top of the body won't work because the <script> is being executed before <div id="top"> is rendered.
Your code works fine for me, try this:
<html>
<head>
<style>
#top {
height: 100vh;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
transition: background-color 700ms linear;
background-color: rgba(253, 208, 7, 1);
justify-content: center;
}
#top.scrolled {
background-color: transparent
}
</style>
</head>
<body>
<section class="full-height section-scroll" id="top">
<div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
<section class="intro-top">
<h1>This is my H1</h1>
</section>
</section>
<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br>');
document.bgColor = "#CC9900";
//hours = 4; Just for testing
//18-19 night
if (hours > 17 && hours < 20) {
document.getElementById("top").style.backgroundColor = "orange"
}
//20-21 night
else if (hours > 19 && hours < 22) {
document.getElementById("top").style.backgroundColor = "red"
}
//22-4 night
else if (hours > 21 || hours < 5) {
document.getElementById("top").style.backgroundColor = "#C0C0C0";
}
//9-17 day
else if (hours > 8 && hours < 18) {
document.getElementById("top").style.backgroundColor = "#616D7E";
}
//7-8 day
else if (hours > 6 && hours < 9) {
document.getElementById("top").style.backgroundColor = "skyblue";
}
//5-6 day
else if (hours > 4 && hours < 7) {
document.getElementById("top").style.backgroundColor = "steelblue";
} else {
document.getElementById("top").style.backgroundColor = "white";
}
</script>
</body>
</html>