Question

我有一个字符串，我想在JavaScript中只更改一个颜色字母。

HTML：

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

在我的JavaScript文件中，我检索这样（正常）

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

但我不知道如何改变一个单词的颜色（＆＃39; o＆＃39;＆＃34;你好＆＃34;例如）。如果我改变了感谢

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

它会改变所有文本（当然）。但我不想要那个。

Answer 1

您可以在元素的replace()属性中使用innerHTML方法：

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

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

Answer 2

在您的代码中：

 var letters = document.getElementById()

您实际上检索了整个元素，而不是其中的文本。这可能是它完全改变颜色的原因。

所以我建议你使用

document.getElementById().innerHtml()

。此函数将检索HTML标记（div）中的内容。然后你做颜色改变，如

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

Answer 3

适用于

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

但如果一个单词包含两个相似的字母，我就无法为两者着色......为什么？

Answer 4

如果一个单词包含两个相似的字母，那么在 for 循环中我们可以使用字母的位置作为 i if i == n , replace(letter[n], styled span tag)

如何在JavaScript中更改一个字母的颜色？

4 个答案: