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' 确实只保存了 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>`

Demo

Answer 2

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>

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

javascript style is not working on splited strings

javascript

methods

styles

split