更改 JavaScript 中元素字符串特定部分的顏色

Question

我正在創建一個聊天應用程序，我希望用戶文本被着色。 這是我創建文本元素的方式：

var item = document.createElement('li'); 
item.textContent = `[Anye]: hello`;
item.style.fontWeight = 'bold';
item.style.color = 'red';

這是這段代碼的執行方式：

另一方面，這就是我想要的：

有沒有辦法只改變部分文本的顏色？

注意：所需的圖像是使用控制台創建的，請記住，消息不是固定的，取決於用戶他們想說什么。

如果需要，我願意在這個例子中使用jQuery 。

謝謝！

Answer 1

您可以將作者包裝在span元素中並設置樣式屬性。

 var item = document.createElement('li'); item.style.fontWeight = 'bold'; const author = document.createElement("span"); author.innerText = "[Anye]: "; author.style.color = 'red'; item.append(author); item.innerHTML += "hello"; document.body.append(item);

或者您可以將消息包裝在span元素中並在 CSS 中設置預定義樣式。

 var item = document.createElement('li'); item.innerHTML = `[Anye]: <span>hello</span>`; item.style.fontWeight = 'bold'; item.style.color = 'red'; document.body.append(item);

 li span { color: initial; }