Changing a variable with css

Question

How i change the var daynames font-size and color, using css?

var monthNames = [ "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro" ]; 

var dayNames= ["Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sabado"]
var newDate = new Date();

newDate.setDate(newDate.getDate());

$('#Date').html(dayNames[newDate.getDay()] + "<br>" + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

logan Sarav · Accepted Answer · 2014-07-28 09:23:00Z

2

You can do this to add font-size and color.

 $('#Date').html("<span style='font-size:28px; color:#ffffff;'>" + dayNames[newDate.getDay()] + "</span><br>" + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

answered Jul 28, 2014 at 9:23

logan Sarav

7816 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

logan Sarav Over a year ago

Glad i could help :), accept the answer, which works for you the best. So it may help others

Chad Scira · Accepted Answer · 2014-07-28 09:36:49Z

0

You could do something like this JSFiddle

$('.date').html(
    '<span class="dayname">' +dayNames[newDate.getDay()] + '</span><br />' + 
    '<span class="day">' + newDate.getDate() + '</span> ' +
    '<span class="month">' + monthNames[newDate.getMonth()] + '</span> ' +
    '<span class="year">' + newDate.getFullYear() + '</span>'
);

then you can control the styling like this

.dayname {
    color: orange;
    font-size: 32px;
}
.day {
    color: red;
}
.month {
    color: green;
}
.year {
    color: blue;
}

I'm not really sure what you're trying to do here, but its usually smart to avoid inline styles, unless it needs to be dynamic.

edited Jul 28, 2014 at 9:36

answered Jul 28, 2014 at 9:28

Chad Scira

9,8893 gold badges59 silver badges51 bronze badges

Comments

CodeSlayer · Accepted Answer · 2014-07-30 06:12:16Z

0

try this

var dayNames= ["<p style='color:blue;font-size:10px;'>Domingo</p>",
               "<p style='color:red;font-size:10px;'>Segunda-feira</p>",
               "<p style='color:gray;font-size:10px;'>Terça-feira</p>",
               "<p style='color:yellow;font-size:10px;'>Quarta-feira</p>",
              "<p style='color:red;font-size:10px;'>Quinta-feira</p>",
               "<p style='color:red;font-size:10px;'>Sexta-feira</p>",
              "<p style='color:red;font-size:10px;'>Sabado</p>"]

or

 var style="<p style='color:red;font-size:10px;'>";

 var dayNames= [style+"Domingo</p>",
               style+"Segunda-feira</p>",
               style+"Terça-feira</p>",
               style+"Quarta-feira</p>",
              style+"Quinta-feira</p>",
               style+"Sexta-feira</p>",
              style+"Sabado</p>"]

edited Jul 30, 2014 at 6:12

answered Jul 28, 2014 at 9:22

CodeSlayer

1,3171 gold badge12 silver badges34 bronze badges

2 Comments

Chad Scira Over a year ago

this is not a good solution, you are mixing HTML with the DATA, the way you had it initially was much better.

Chad Scira Over a year ago

@mauriatti heres an example of why you want to separate your data from your html. I was easily able to create something reusable jsfiddle.net/icodeforlove/h8Jh2/6

Collectives™ on Stack Overflow

Changing a variable with css

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related