सीएसएस को गतिशील रूप से एकल वर्णों पर लागू करना?

Question

मैं अपने पृष्ठ पर एक दिनांक फ़ील्ड पॉप्युलेट करने के लिए जावास्क्रिप्ट/jQuery का उपयोग कर रहा हूं। मैं जेनरेट की तारीख के प्रत्येक व्यक्तिगत चरित्र में सीएसएस स्टाइल जोड़ना चाहता हूं और सोच रहा हूं कि यह संभव है और मैं इसे करने के बारे में कैसे जा सकता हूं। असल में, मैं अंतिम परिणाम चाहते हैं तो इस तरह देखने के लिए:

एचटीएमएल:

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

जावास्क्रिप्ट:

यहाँ मेरी कोड है जो तारीख पैदा कर रहा है है

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

मुझे यकीन नहीं है कि क्या ओपी केवल पात्रों को अपने स्वयं के तत्व में विभाजित करने के लिए, या सीएसएस समाधान के लिए भी है जो स्क्रीनशॉट का अनुमान लगाता है। - मेरा जवाब है दोनों यहाँ डेमो बेला देखें: http://jsfiddle.net/teddyrised/pv9601hj/4/

दिनांक स्ट्रिंग बंटवारे के लिए, आप जे एस पर भरोसा करना होगा, कुछ की तरह:

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

सीएसएस के लिए, यह बस के चतुर उपयोग है CSS3 फ्लेक्सबॉक्स विनिर्देश और छद्म तत्व:

.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

व्यक्तिगत पात्रों के लिए सीएसएस को लागू करना संभव नहीं है, केवल तत्वों के लिए। इसलिए, आपको अपने पात्रों को तत्वों में विभाजित करने की आवश्यकता है! प्रत्येक चरित्र को span में लपेटें, और आप उन 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 और शैली।