javascript样式不适用于拆分的字符串

Question

当我使用split((方法拆分两个单词时，我不能用纯javasript对其进行样式设置。我的意图是改变第二个单词的颜色。有人知道解决办法吗。代码如下。提前谢谢。

HTML:

<p id="demo">Better Choice</p>

Javascript：

let a = document.getElementById('demo').innerHTML;
let b = a.split(" ");
let c = b[1];
c.style.color="red"; // this is not working

Answer 1

C目前只是工作选项，它不是HTML元素，因此无法添加样式。如果你想添加样式，你需要把它变成一个元素，然后对它进行样式化

let a = document.getElementById('demo').innerHTML;
let b = a.split(" ");
let c = document.getElementById('demo').innerHTML = b[0] + " <span style='color:red'>" + b[1]+ "</span>";

一旦你做了a.split("(，你就无法访问元素本身，所以你需要为C.再次获得它

你也可以做这个

let a = document.getElementById('demo');
let b = a.innerHTML.split(" ");
let c = a.innerHTML = b[0] + " <span style='color:red'>" + b[1]+ "</span>";

此外，如果你想动态编辑红色，你可以使用这样的字符串文字。

let a = document.getElementById('demo');
let b = a.innerHTML.split(" ");
let color = "red";
let c = a.innerHTML = `${b[0]} <span style='color:${color}'>${b[1]}</span>`;

<p id="demo">Better Choice</p>

Answer 2

变量'c'只包含innerHTML值的一部分。如果你不想整个"a"元素改变颜色，只想改变第二部分，那么插入一个span元素，如下所示：

let a = document.getElementById('demo');
let b = a.innerHTML.split(" ");
let c = b[1];
a.innerHTML = `${b[0]} <span style="color:red">${c}</span>`

演示