[英]Applying CSS to single characters dynamically?
I am using JavaScript/jQuery to populate a date field on my page. 我正在使用JavaScript / jQuery填充页面上的日期字段。 I want to add CSS styling to each individual character of the generated date and wondering if it is possible and how I could go about doing it. 我想将CSS样式添加到生成日期的每个单独字符,并想知道是否可能以及如何进行此操作。 Basically, I want the end result to look like this: 基本上,我希望最终结果如下所示:
Here is my code which is generating the date: 这是我生成日期的代码:
HTML: HTML:
<div class="date"></div>
JavaScript: 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);
I am not sure if OP is asking for a means to split the characters into its own self-containing element only, or also for the CSS solution that approximates the screenshot. 我不确定OP是否要求将字符分割为自己的自包含元素,或者也用于近似屏幕截图的CSS解决方案。 My answer does both — see demo fiddle here: http://jsfiddle.net/teddyrised/pv9601hj/4/ 我的回答都是这两个 - 请看这里的演示小提琴: http : //jsfiddle.net/teddyrised/pv9601hj/4/
For splitting the date string, you will have to rely on JS, something like: 要分割日期字符串,您必须依赖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>');
For the CSS, it is simply a clever use of CSS3 flexbox specification and pseudo-elements: 对于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;
}
It's not possible to apply CSS to individual characters, only to elements. 不可能将CSS应用于单个字符,仅应用于元素。 Therefore, you need simply to split your characters into elements! 因此,您只需将字符拆分为元素即可! Wrap each character in a span
, and you can apply CSS to each of those spans
(each of which contains just one character). 包裹span
每个字符,您可以将CSS应用于每个spans
(每个spans
只包含一个字符)。
Something like this ( full JSFiddle ): 像这样的东西( 完整的JSFiddle ):
var chars = date.split("");
$.each(chars, function(i, char) {
$(".date").append("<span>" + char + "</span");
});
you have to split the string up into characters by yourself: 你必须自己将字符串拆分成字符:
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);
this way you can give each character it's individual class
and style. 通过这种方式,您可以为每个角色提供个性化的class
和风格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.