动态地将CSS应用于单个字符？

Question

我正在使用JavaScript/jQuery填充页面上的日期字段.我想将CSS样式添加到生成日期的每个单独字符,并想知道是否可能以及如何进行此操作.基本上,我希望最终结果如下所示:

这是我生成日期的代码:

HTML:

<div class="date"></div>

JavaScript的:

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();
$('.date').text(date);

这是一个JSFiddle.

Answer 1

我不确定OP是否要求将字符分割为自己的自包含元素,或者也用于近似屏幕截图的CSS解决方案.我的回答都是这两个 - 请看这里的演示小提琴:http://jsfiddle.net/teddyrised/pv9601hj/4/

要分割日期字符串,您必须依赖JS,例如:

var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
         + ('0' + dNow.getDate()).slice(-2) + ' '
         + dNow.getFullYear();
var dateSplit = date.split("");
$('.date').html('<span>'+dateSplit.join('</span><span>')+'</span>');

对于CSS,它只是巧妙地使用CSS3 flexbox规范和伪元素:

.date {
    background-color: #000;
    display: flex;
}
.date span {
    border-radius: 4px;
    box-shadow: inset 0 0 1px 2px rgba(255,255,255,.125);
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2em;
    line-height: 2em;
    margin-right: 4px;
    overflow: hidden;
    position: relative;
    width: 1em;
    height: 2em;
    text-align: center;
}
.date span::before {
    background-color: rgba(255,255,255,.2);
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}
.date span::after {
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.1) 0%,
        rgba(0,0,0,.25) 50%,
        rgba(255,255,255,.25) 50%,
        rgba(255,255,255,.1) 100%
        );
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Answer 2

不可能将CSS应用于单个字符,仅应用于元素.因此,您只需将字符拆分为元素即可!将每个字符包装在一个中span,您可以将CSS应用于每个spans字符(每个字符只包含一个字符).

像这样的东西(完整的JSFiddle):

var chars = date.split("");

$.each(chars, function(i, char) {
   $(".date").append("<span>" + char + "</span");
});