javascript - 样式化包含模板文字的附加文本

我想设置一个简短的句子，包括一个单词和一个数字，这些单词和数字是使用跨度和模板文字创建的，因此，例如，我们有红色的Review单词和蓝色的模板文字，但是我无法使代码正常工作：

let slide_launched = 10;
let cardState = document.getElementById("cardState");
cardState.innerHTML = `<span style="color:red" >Review </span><span style="color:blue font-weight:700" >${slide_launched - 1}</span>`;

<div class="containerList">
<ul id="list">

	<li>
		<span>Number:</span>
		<span id="cardState"></span>
	</li>

</ul>
</div>

我试图分离文本的innerHTML附加部分并分别设置样式，但这也不起作用：

 let slide_launched = 10;
 let cardState = document.getElementById("cardState");

cardState.innerHTML = `<span style="color:red" >Review </span>`;

cardState.innerHTML += `<span style="color:blue font-weight:700" >${slide_launched - 1}</span>`

<div class="containerList">
    <ul id="list">

    	<li>
    		<span>Number:</span>
    		<span id="cardState"></span>
    	</li>

    </ul>
    </div>

最佳答案

您忘记添加分号：

<span style="color:blue font-weight:700" >${slide_launched - 1}</span>

改成：

<span style="color:blue;font-weight:700" >${slide_launched - 1}</span>

您需要在每个property:value;之后添加分号

关于javascript - 样式化包含模板文字的附加文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59270247/