Nell’articolo precedente abbiamo descritto la procedura necessaria per ottenere una doppia colorazione dei caratteri utilizzando esclusivamente regole di stile CSS; come sottolineato, data una stringa da formattare, tale approccio impone di stilizzare un elemento alla volta tra quelli che la compongono, un’eventuale classe dovrà quindi essere applicata a ciascun carattere nell’ordine in cui esso si presenta nel temine da modificare.
JavaScript permette invece di automatizzare tale procedura, ciò significa che la doppia colorazione potrà essere applicata ad un’intera stringa, indipendentemente dalla sua lunghezza, dai termini e dal numero dei caratteri che la compongono, come nell’esempio seguente:
Le regole di stile utilizzate potrebbero essere anche in questo caso le stesse adottate per l’esempio proposto nell’articolo di ieri:
.☯ {
position:relative;
display:inline-block;
width:1;
font-size:60px;
color: green;
overflow:hidden;
white-space: pre;
}
.☯:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content);
overflow:hidden;
color: grey;
}Ecco invece il codice JavaScript che consentirà di automatizzare la ricolorazione dei caratteri, esso consentirà di passare all’attributo data-content tutti i caratteri della stringa tramite un ciclo e di effettuare altrettante chiamate alla classe:
var coloraCarattere = $('.coloraCarattere').text();
var coloraCarattereChars = coloraCarattere.split('');
$('.coloraCarattere').html('');
$.each(coloraCarattereChars, function(i,v){
$('.coloraCarattere').append('<span class="☯" data-content="' + v + '">' + v + '</span>');
});A questo punto non resterà che applicare coloraCarattere alla stringa:
<span class="coloraCarattere">Blah! Blah! Blah!</span>
Il metodo proposto potrebbe risultare particolarmente comodo e utile nel caso in cui effettuare stilizzazioni tramite CSS dovesse richiedere un impegno troppo gravoso dato il numero di caratteri da formattare.
