Style n-ta litera w rozpiętości za pomocą CSS

mam:Style n-ta litera w rozpiętości za pomocą CSS

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

i szukam, aby h, m i s mniejszy niż w pozostałej części tekstu. Słyszałem elementu nth-letter pseudo w CSS, ale nie wydaje się działać:

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

Wiem, że mógłbym użyć JavaScript do analizowania ciąg i zastąpić list z otoczeniem span tagi i Styl tagi. Jednak ciąg jest aktualizowany co sekundę i wydaje się, że parsowanie często wymagałoby dużego nakładu zasobów.

Źródło

2013-04-14 n0pe

+12

Bo coś takiego nie istnieje. Prawdopodobnie przeczytałeś go z bloga sugerującego jego implementację - zobacz http://css-tricks.com/a-call-for-nth-everything/ i przewiń w dół do ":: nth-letter()/:: last -letter()/:: nth-last-letter() "- i tak, możesz to łatwo osiągnąć za pomocą JS. –

@ FabrícioMatté, miałem przeczucie ... Czy mógłbyś zaproponować inny sposób robienia tego (js zakładam), który byłby wystarczająco wydajny, by być uruchamiany w każdej sekundzie? – n0pe

Może coś takiego http://codepen.io/FWeinb/pen/djuIx –

Pod względem wydajności polecam piekło 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>

Jedno przęsło dla każdego h, m i s liter, dzięki czemu można projektować je poprawnie (można stosować takie same lub różne stylizacji dla każdego).

I kolejna rozpiętość dla każdego numeru, dzięki czemu można buforować odniesienia. Podsumowując, oto JS na bardzo uproszczonym zegar czasu lokalnego:

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

To ilustruje podstawową ideę buforowane selektorów. Nie odtwarzając ponownie elementów, masz również dobry wzrost wydajności.

Jednak raz na sekundę nie jest to bardzo ciężka praca dla czegoś tak prostego (chyba że masz setki zegarów na swojej stronie).

Źródło

2013-04-14 00:37:27

To był najbardziej zabawny wstęp do odpowiedzi –

To może być długi sposób na zrobienie tego przy użyciu javascript i jQuery, ale tutaj jest możliwe rozwiązanie.

Oddzielić h, m & od oryginalnego napisu.

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

Następnie można ustawić przęsła w zakresie #string za pomocą CSS.

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

Oto demo fiddle showing the above.

Źródło

2013-04-14 00:23:28 dev

To powoduje, że litery są rozrzucane na pięciolinii i mają tę samą klasę.Może warto wyróżnienie 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; 
}

Źródło

2013-04-14 01:05:20 orb

W rzeczywistości można usunąć całą pętlę for i zastąpić ostatnią linię: – Patanjali

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

W ten sposób css staje się: * # ciąg span {rozmiar-czcionki: 10px} – Patanjali

Proste rozwiązanie z CSS i owijając każdy znak o rozpiętości-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/

Źródło

2016-10-21 08:36:23 Borbo

Style n-ta litera w rozpiętości za pomocą CSS

Odpowiedz

Powiązane problemy