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.
Aucun commentaire:
Enregistrer un commentaire