Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • Software e App
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Web Design→Automatizzare la colorazione dei caratteri con JavaScript
  • 14
    MAG
    2014

Automatizzare la colorazione dei caratteri con JavaScript

Scritto da Claudio Garau | Web Design

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:

blah

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.

  • colorazione caratteri
  • CSS
  • Javascript

Naviga tra i post del Blog

← Doppia colorazione dei caratteri con CSS
→ Un ticker in poche righe di codice con jQuery

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Post correlati
  • Doppia colorazione dei caratteri con CSS 13/05/2014
  • Contare i caratteri all’interno di una textarea usando jQuery 17/12/2010
  • Automatizzare App su iOS e Android con Appium 07/11/2016
  • Automatizzare i refresh del browser con CSSrefresh 05/10/2012
  • Image zoom in JavaScript con Zooming 03/12/2016
I post più letti del mese
  • Apostrofi e virgolette in pagine HTML: come gestirli nel modo giusto30/09/2013
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina22/03/2010
  • Creare ingranaggi al volo con Gear generatorCreare ingranaggi al volo con Gear generator10/03/2010
  • Centrare una tabella con i CSSCentrare una tabella con i CSS24/07/2010
  • Uso corretto e sintassi del tag "br"Uso corretto e sintassi del tag "br"13/10/2011
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie