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

Question

我想设计一个包含单词和数字的短句，使用 span 和模板文字创建，因此我们有，例如，红色的 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>

Answer 1

你忘了加分号:

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

更改为:

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

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