Question

我如何使用css更改var daynames字体大小和颜色？

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());

Answer 1

您可以这样做来添加字体大小和颜色。

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

Answer 2

试试这个

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>"]

或

 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>"]

Answer 3

你可以做这样的事情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>'
);

然后您可以像这样控制样式

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

我不确定你在这里尝试做什么，但除非需要动态，否则它通常很聪明，以避免inline styles。

用css更改变量

3 个答案: