我是否可以在改变段落文字的同时，保留段落内跨度元素的CSS（着色）？

Question

这是我想修改的HTML，我想保留标签中的文字--Paper和Rock的颜色（CSS）。基本上，我想改变标签中的文字和标签中的文字的颜色。

并保留这2个标签的CSS（着色）。

HTML.CSS

    <div class="message">
        <p><span id="result-user">Paper</span> beats <span id="result-comp">Rock</span>!You win!</p>
    </div>

CSS。

    #result-user{
        color: rgb(246, 189, 76);
    }
    #result-comp{
        color: rgb(246, 189, 76);
    }

JavaScript。

    let resultUserMessage_span = document.getElementById('result-user');
    let resultCompMessage_span = document.getElementById('result-comp');
    let resultMessage_p = document.querySelector('.message > p');
    userChoice = "Rock";
    compChoice = "Paper";

    resultMessage_p.innerHTML = `${userChoice} loses to ${compChoice}!You lose!`;

Answer 1

插入正确的id的跨度时，改变了 innerHTML

resultMessage_p.innerHTML = `<span id="result-user">${userChoice}</span> loses to <span id="result-comp">${compChoice}</span>! You lose!`;

Answer 2

在你的函数中，尝试

document.getElementById("p1").innerHTML = "<span id="result-user">${userChoice}</span> beats <span id="result-comp">${compChoice}</span>!You lose!";

Answer 3

简单的解决方法是用span元素来包装你的代码，比如说

resultMessage_p.innerHTML = `<span id="result-user">${userChoice}</span> loses to <span id="result-comp">${compChoice}</span> !You lose!`

更好的办法是将你的答案模块化处理，为你的答案的每个部分添加跨度，并根据 "游戏 "的状态改变 innerHTML。

<p>
  <span id="result-user">Rock</span>
  <span id="result-status"> loses to </span> 
  <span id="result-comp">Paper</span>!
  <span id="final-result"> You lose!</span>
</p>