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

【问题标题】：Change color of specific part of element string in JavaScript在 JavaScript 中更改元素字符串特定部分的颜色
【发布时间】：2022-07-23 22:06:24
【问题描述】：

我正在创建一个聊天应用程序，我希望为用户文本着色。以下是我创建文本元素的方法：

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

这就是这段代码的执行方式：

另一方面，这正是我想要的：

有没有一种方法可以只改变文本的部分的颜色？

注意：所需的图像是使用控制台创建的，请记住，消息不是固定的，取决于用户他们想说什么。

如果需要，我愿意在此示例中使用 jQuery。

谢谢！

【问题讨论】：

为什么投反对票？

标签： javascript jquery css element createelement

【解决方案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;
}

【讨论】：

谢谢！这就是我一直在寻找的。我会在 7 分钟内接受你的回答，我知道为什么有人会否决我的问题