单击按钮后的文本样式如何与单击前的文本（JS，CSS）不同？答案

【问题标题】：How to style the text after clicking the button differently than the text before clicking (JS, CSS)?单击按钮后的文本样式如何与单击前的文本（JS，CSS）不同？
【发布时间】：2021-08-22 11:52:15
【问题描述】：

我希望 点击后 的输出具有不同的颜色。例如，文本的颜色（<p>）是蓝色的在点击按钮之前，我希望点击后的输出是绿色的。

但是，我似乎无法在网络上找到相关信息，我自己也无法找到。这是我的代码：

button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
p {
color: blue;
font-size: 20px;
}

<p id="demo">Hello everyone! I will get changed after being clicked :)</p>

<button onClick='document.getElementById("demo").innerHTML = "I appear after clicking the button :P"' class="xx">Click</button>

我是 JavaScript 新手，所以请多多包涵……在找不到我想要的东西之后，我尝试做不同的事情，就像我在 .innerHTML 之后在 <button> 标签内写了 (id="xx") 并设置了样式它使用 CSS，但它为按钮本身设置样式并且没有提供所需的输出：

<!DOCTYPE html>
<html>
<head>
<style>
button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
#xx {
font-size: 20px;
color: blue;
}

</style>
</head>
<body>


<p id="demo">Hello everyone! I will get changed after being clicked :)</p>

<button onClick='document.getElementById("demo").innerHTML(id="xx") = "I appear after clicking the button :P"' class="xx">Click</button>



</body>
</html>

我还尝试了其他失败的方法，所以我在这里不知所措。谁能告诉我点击按钮后如何使用不同样式的文本？

这是所需输出的说明：

【问题讨论】：

标签： javascript html css button onclick

【解决方案1】：

一种方法：

let btn = document.querySelector('#btn')
btn.addEventListener('click', changeText)
function changeText() {
 let ptag = document.querySelector('#demo')
 ptag.innerHTML= "I appear after clicking the button :P"; 
 ptag.className = "newone";
 }

button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
p {
color: blue;
font-size: 20px;
}
.newone {
  color: green;
}

<p id="demo">Hello everyone! I will get changed after being clicked :)</p>
<button id="btn" class="xx">Click</button>

【讨论】：

【解决方案2】：

检查此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example with button</title>
    <style>
        body {
            color: blue;
        }
        button {
            border: 1px solid gray;
            color: white;
            background-color: gray;
            width: 150px;
            height: 40px;
            font-size: 15px;
            cursor: pointer;
        }
        button:hover {
            border-color: darkolivegreen;
            background-color: darkolivegreen;
        }
        .newstyle {
            color: green;
        }
    </style>
    <script>
        function change_text_color() {
            let text = document.querySelector('#demo')
            text.innerHTML= "I appear after clicking the button :P";
            text.className = "newstyle";
        }
    </script>
</head>
<body>
    <p id="demo">Hello everyone! I will get changed after being clicked :)</p>
    <br/>
    <button onClick='javascript:change_text_color();' class="xx">Click here</button>
</body>
</html>

【讨论】：

【解决方案3】：

Element precedence in CSS can be confusing 所以也许最简单的方法是向您的演示元素添加一个类 - 设置初始颜色 - 然后让按钮添加一个新的颜色类。

const demo = document.querySelector('#demo');
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);

function handleClick() {
  demo.textContent = 'I appear after clicking the button';
  demo.classList.add('green');
}

.blue { color: blue; }
.green { color: green; }

<p id="demo" class="blue">Hello everyone! I will get changed after being clicked :)</p>
<button>Click</button>

【讨论】：

【解决方案4】：

在您的情况下，基本上有 2 个选项。您可以将<font> 标签添加到您的innerHTML

<button onClick='document.getElementById("demo").innerHTML = "<font color='#90ee90'>I appear after clicking the button :P</font>"' class="xx">Click</button>

或使用 JavaScript 更改颜色

document.getElementById("demo").style.color = 'green';

【讨论】：

感谢您的回答！但是，您建议的两种方法都不适合我。 :/ (你能插入一个sn-p来说明吗？)