動態地將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 （每個spans只包含一個字符）。

像這樣的東西（ 完整的JSFiddle ）：

var chars = date.split("");

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

Answer 3

你必須自己將字符串拆分成字符：

你的擴展你的小提琴

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和風格。