使用Javascript和HTML，如何更改同一行中显示的特定变量的颜色？

Question

是否可以更改val的颜色而不更改“ Solution”的颜色并使它们显示在同一行中（如下所示的代码？）>

result.innerText = "Solution:" + val.toFixed(2);

我知道您可以添加result.style="color:red";

但是当我运行时，这会改变包括“ solution：”在内的整个行的颜色；

<div id="result" align ="center"></div>

是否可以更改val的颜色而不更改“ Solution”的颜色并使它们显示在同一行中（如下所示的代码？ result.innerText =“解决方案：” + val.toFixed（2）;我知道...

Answer 1

将val包围起来并为其添加样式应该可以：

Answer 2

您可以通过创建单词“ solution”的:: before伪元素来实现此目的-这使您可以设置数字的值，并自动将文本放置为div的第一个子元素。

Answer 3

另一种选择是将跨度放在标记中，<div id="result">Solution:<span class="solutionval"></span></div>然后仅在此处更改文本/值。