Come posso cambiare il colore di una lettera in JavaScript? - javascript, html, css

Ho una stringa e voglio cambiare solo una lettera di colore in JavaScript.

HTML:

<div id="lettersList">Hello</div>

Nel mio file JavaScript, recupero così (normale)

var lettres = document.getElementById("lettersList");

Ma non so come cambiare il colore di una sola parola (la "o" di "ciao" per esempio). Se cambio grazie a

for (var i=0; i<lettres.length; i++ { lettres[i].style.color = "yellow"; }

cambia tutto il testo (ovviamente). Ma non lo voglio.

risposte:

Puoi usare il replace() metodo sul innerHTML proprietà dell'elemento:

const element = document.querySelector("#lettersList");
element.innerHTML = element.innerHTML.replace("o", "<span style="color: red;">o</span>");

<div id="lettersList">Hello</div>

Nel tuo codice:

 var letters = document.getElementById()

in realtà recuperi l'intero elemento, non il testo in esso. Questo potrebbe essere il motivo per cui ha cambiato totalmente il suo colore.

Quindi ti consiglio di usare

document.getElementById().innerHtml()

. Questa funzione recupererà il contenuto nei tuoi tag HTML (div). Quindi fai il cambio di colore come

for(var i = 0; i<letters.length; i++){
//only change the one you want to
if(i == 4 // or whatever you like){
element.innerHTML = element.innerHTML.replace(letters[i], "<span style="color: yellow;">"+letters[i]+"</span>");
}
}

funziona con

for(var i = 0; i<letters.length; i++){ if(i == 4 { element.innerHTML =element.innerHTML.replace(letters[i], "<span style="color:yellow;">"+letters[i]+"</span>");}}

Ma se una parola contiene due lettere simili, non posso colorarle entrambe... Perché?