stile lettera n-esimo in un arco utilizzando i CSS

ho:stile lettera n-esimo in un arco utilizzando i CSS

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

e sto cercando di fare il h, m e s più piccola rispetto al resto del testo. Ho sentito parlare dell'elemento nth-letter pseudo in CSS, ma non sembra funzionare:

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

So che potrei usare javascript per analizzare la stringa e sostituire la lettera con circostante span tag e lo stile tag. Tuttavia, la stringa viene aggiornata ogni secondo e sembra un'analisi che spesso sarebbe intensiva per la risorsa.

fonte

2013-04-14 n0pe

+12

Perché una cosa del genere non esiste. Probabilmente lo hai letto da un blog che suggerisce la sua implementazione - vedi http://css-tricks.com/a-call-for-nth-everything/ e scorri fino a ":: nth-letter()/:: last -letter()/:: nth-last-letter() "- e sì, puoi farlo facilmente con JS. –

@ FabrícioMatté, ho avuto una sensazione ... Potresti suggerire un altro modo per farlo (suppongo che sia abbastanza efficiente per essere eseguito ogni secondo? – n0pe

Forse qualcosa come questo http://codepen.io/FWeinb/pen/djuIx –

Per quanto riguarda le prestazioni, consiglio l'inferno span.

<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>

Un arco per ogni h, m e s lettere in modo da poterli stile correttamente (possono essere applicate né uguali o diversi styling per ciascuno).

E un altro intervallo per ogni numero in modo da poter memorizzare i riferimenti. In sintesi, ecco un JS per un orologio locale in tempo molto semplicistico:

//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

Questo illustra l'idea di base di selettori nella cache. Non ricreando gli elementi, hai anche un buon incremento delle prestazioni.

Tuttavia, una volta al secondo non è un lavoro molto pesante per qualcosa di così semplice (a meno che non si abbiano centinaia di orologi nella pagina).

fonte

2013-04-14 00:37:27

Questa è stata l'introduzione più divertente a una risposta –

Questo potrebbe essere un modo prolisso di fare ciò usando javascript e jQuery, ma ecco una possibile soluzione.

Separare il h, m & s dalla stringa originale.

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

Quindi è possibile lo stile campate entro #string con i CSS.

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

Ecco un demo fiddle showing the above.

fonte

2013-04-14 00:23:28 dev

Questo getta solo le lettere in campate e dà loro tutti la stessa classe.Forse vale la pena una menzione d'onore lol :-)

jsFiddle

JavaScript:

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>

CSS:

.smaller { 
    font-size: 10px; 
}

fonte

2013-04-14 01:05:20 orb

In realtà, è possibile eliminare l'intero ciclo for e sostituire la riga finale con: – Patanjali

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

Il css diventa quindi: * # span stringa {font-size: 10px} – Patanjali

Soluzione semplice con i CSS e avvolgendo ogni personaggio con un arco-tag:

#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/

fonte

2016-10-21 08:36:23 Borbo

stile lettera n-esimo in un arco utilizzando i CSS

risposta

Problemi correlati