शैली अंतराल में वें पत्र सीएसएस

का उपयोग कर रहा है:शैली अंतराल में वें पत्र सीएसएस

<span id="string">12h12m12s</span>

और मैं h, m और s पाठ के बाकी की तुलना में छोटे बनाने के लिए देख रहा हूँ। मैं सीएसएस में nth-letter छद्म तत्व के बारे में सुना है, लेकिन यह काम किया जाना प्रतीत नहीं होता:

#string:nth-letter(3), 
#string:nth-letter(6), 
#string:nth-letter(9) { 
    font-size: 2em; 
}

मैं मैं स्ट्रिंग पार्स और span टैग और शैली के आसपास के साथ पत्र को बदलने के लिए जावास्क्रिप्ट इस्तेमाल कर सकते हैं पता है टैग। हालांकि, स्ट्रिंग को हर सेकेंड में अपडेट किया जाता है और ऐसा लगता है कि अक्सर गहन संसाधनों का पुन: संसाधन होगा।

स्रोत

2013-04-14 n0pe

+12

क्योंकि ऐसी बात मौजूद नहीं है। आपने शायद इसे एक ब्लॉग से पढ़ा है जो इसके क्रियान्वयन का सुझाव देता है - http://css-tricks.com/a-call-for-nth-everything/ देखें और ":: nth-letter()/:: पर अंतिम बार स्क्रॉल करें -लेटर()/:: nth-last-letter() "- और हाँ, आप आसानी से जेएस के साथ इसे प्राप्त कर सकते हैं। –

@ FabrícioMatté, मुझे एक एहसास था ... क्या आप ऐसा करने का एक और तरीका सुझा सकते हैं (जेएस में मुझे लगता है) कि हर सेकेंड चलाने के लिए पर्याप्त कुशल होगा? – n0pe

शायद ऐसा कुछ http://codepen.io/FWeinb/pen/djuIx –

प्रदर्शन के अनुसार, मैं span नरक की सिफारिश करता हूं। प्रत्येक h, m और s पत्र के लिए

<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>

एक अवधि ताकि आप उन्हें ठीक से शैली दे सकते हैं (प्रत्येक के लिए या तो एक ही या अलग स्टाइल आवेदन कर सकते हैं)।

और प्रत्येक नंबर के लिए एक और अवधि ताकि आप संदर्भों को कैश कर सकें। संक्षेप में, यहाँ एक बहुत ही साधारण स्थानीय समय घड़ी के लिए एक जे एस है:

//cache number container element references 
var h = document.getElementById('h'), 
    m = document.getElementById('m'), 
    s = document.getElementById('s'), 
    //IE feature detection 
    textProp = h.textContent !== undefined ? 'textContent' : 'innerText'; 

function tick() { 
    var date = new Date(), 
     hours = date.getHours(), 
     mins = date.getMinutes(), 
     secs = date.getSeconds(); 
    h[textProp] = hours < 10 ? '0'+hours : hours; 
    m[textProp] = mins < 10 ? '0'+mins : mins; 
    s[textProp] = secs < 10 ? '0'+secs : secs; 
} 
tick(); 
setInterval(tick, 1000);

Fiddle

यह कैश की गई चयनकर्ताओं के मूल विचार को दिखाता है। तत्वों को फिर से नहीं बनाकर, आपके पास भी एक अच्छा प्रदर्शन बढ़ावा है।

हालांकि, एक बार दूसरा एक बहुत आसान काम के लिए बहुत भारी काम नहीं है (जब तक कि आपके पृष्ठ में सैकड़ों घड़ियों नहीं हैं)।

स्रोत

2013-04-14 00:37:27

यह उत्तर देने के लिए सबसे मनोरंजक परिचय –

यह जावास्क्रिप्ट और jQuery का उपयोग करके ऐसा करने का एक लंबा घुमावदार तरीका हो सकता है, लेकिन यहां एक संभावित समाधान है।

मूल स्ट्रिंग से h, m & s अलग करें।

string = $('#string').text(); 

hD = string.substr(0,2) 
h = "<span>"+string.substr(2,1)+"</span>"; 
mD = string.substr(3,2) 
m = "<span>"+string.substr(5,1)+"</span>"; 
sD = string.substr(6,2) 
s = "<span>"+string.substr(8,1)+"</span>"; 

finalString = hD + h + mD + m + sD + s; 

$('#string').html(finalString);

तो फिर तुम सीएसएस के साथ #string भीतर फैला शैली दे सकते हैं।

#string{font-size:1.2em} 
#string > span{font-size:0.8em}

यहां demo fiddle showing the above है।

स्रोत

2013-04-14 00:23:28 dev

यह केवल स्पैन में अक्षरों को फेंकता है और उन्हें सभी समान वर्ग देता है।हो सकता है कि मूल्य एक सम्मानजनक उल्लेख lol :-)

jsFiddle

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

var str = document.getElementById('string'), 
    chars = str.innerHTML.split(''); 

for (var i = 0; i < chars.length; i++) { 
    if (chars[i].match(/[hms]/)) { 
     chars[i] = "<span class='smaller'>" + chars[i] + "</span>"; 
    } 
} 
str.innerHTML = chars.join('');

HTML:

<body> 
    <span id="string">12h12m12s</span>   
</body>

सीएसएस:

.smaller { 
    font-size: 10px; 
}

स्रोत

2013-04-14 01:05:20 orb

असल में, आप पूरे लूप को हटा सकते हैं, और अंतिम पंक्ति को प्रतिस्थापित कर सकते हैं: – Patanjali

str.innerHTML = str.innerHTML.replace (/ ([hms])/gi, ' $ 1 '); – Patanjali

सीएसएस तब बन जाता है: * # स्ट्रिंग अवधि {फ़ॉन्ट-आकार: 10 पीएक्स} – Patanjali

सीएसएस के साथ सरल समाधान और अंतराल-टैग के साथ प्रत्येक चरित्र लपेटकर:

#text span:nth-child(2) { 
    color: #ff00ff; 
} 

#text span:nth-child(5) { 
    color: #00ffff; 
} 

#text { 
    font-size: 20px; 
} 

<span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>

https://jsfiddle.net/f8vffLj0/

स्रोत

2016-10-21 08:36:23 Borbo

शैली अंतराल में वें पत्र सीएसएस

उत्तर

संबंधित मुद्दे