How to change the background with javascript?

Question

I have a function in javascript that returns the day and time for text, for insertion in html, how can I add styles to this text, should I do inside javascript or even in html

    function date_time(id){


    date = new Date;
    year = date.getFullYear();
    month = date.getMonth();
    months = new Array('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outbro', 'Novembro', 'Dezembro');
    d = date.getDate();
    day = date.getDay();
    days = new Array('Domingo', 'Segunda - Feira', 'Terça - Feira', 'Quarta - Feira', 'Quinta - Feira', 'Sexta - Feira', 'Sabado');
    h = date.getHours();
    if(h<10)
    {
            h = "0"+h;
    }
    m = date.getMinutes();
    if(m<10)
    {
            m = "0"+m;
    }
    s = date.getSeconds();
    if(s<10)
    {
            s = "0"+s;
    }
    result = 'Bem Vindo, Hoje é '+days[day]+' '+d+' '+months[month]+' '+year;
    document.getElementById(id).innerHTML = result;
    setTimeout('date_time("'+id+'");','1000');
    return true;
    }

Html

    <span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>

Upshot

Answer 1

You have to change the style of this span. Since it already has a color just change it: look for #EC2028 (or rgb(236,32,40)) in the rest of the code and switch to the color you want.

Literally interpreting your question, use:

// Muda a cor do fundo:
document.getElementById('date_time').style.backgroundColor = 'blue'; // ou a cor que quiser

// Muda a cor do texto:
document.getElementById('date_time').style.color = 'black';

Answer 2

You can use the .style to define the properties css of the element
Example:

document.getElementById(id).style.color="blue";

This way you can add any attributes css in its element

Answer 3

Answer:

You have 3 options, of which they are:

(1) - You can change the color of the text by applying a CSS style to your element <span> which would be for example:

#date_time {
  color: #FFF; /*branco*/
}

(2) - You can also do it via javascript:

document.getElementById('date_time').style.color = '#fff';//codigo hexadecimal para branco

(3) - You can also implement style directly applied to the html element (inline style) that would be in your HTML:

<span id="date_time" style="color:#FFF"></span>

Explanation:

An HTML element can have styles applied to it in different forms, the browser interprets all styles that are with reference to its element, there can be styles overlapping too, the most important will always be the most specific, or the one that has the tag !important.

The most recommended solution is (1) which would apply a CSS style to your CSS code from your page, it could be an external.css file or a <style>.

But you can choose what’s best for you.

Answer 4

Hello, I joined this using jquery, until pq do not know much javascript, but you could not add classes according to time? and treat the colors and styles as the added class?

Following example http://jsfiddle.net/alexmachado/8U5mE/