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 只是工作 Choice，它不是 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>`