动态地将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（每个字符只包含一个字符）。

像这样（full JSFiddle）：

var chars = date.split("");

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

Answer 3

你必须自己将字符串拆分成字符：

your fiddle with my extension

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 date_split = date.split("");
var date_html = '';

date_html += '<span class="red">' + date_split[0] + '<span>';
date_html += '<span class="green">' + date_split[1] + '<span>';
date_html += '<span class="blue">' + date_split[2] + '<span>';
date_html += '<span class="red">' + date_split[3] + '<span>';
date_html += '<span class="green">' + date_split[4] + '<span>';
date_html += '<span class="blue">' + date_split[5] + '<span>';
// ... and so on


$('.date').html(date_html);

通过这种方式，你可以为每个角色提供个人class和风格。