时间戳

首页 > 解决方案 > 我可以更改段落文本并同时保留段落内跨度元素的 CSS（着色）吗？

javascript - 我可以更改段落文本并同时保留段落内跨度元素的 CSS（着色）吗？

问题描述

这是我正在尝试更改的 HTML，我正在尝试为包含在标签中的单词保留颜色（CSS） - 纸和岩石。基本上我想更改和中的文本

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

HTML：

    <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!`;

标签： javascripthtmlcssdom

解决方案

更改时插入具有正确 ID 的跨度innerHTML

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

推荐阅读