如何使用JS、CSS实现点击按钮后修改文本为与点击前不同的样式

实现方法 #

你要实现点击按钮后文本变色的效果，只需要在修改p标签内容的同时，为它设置对应颜色样式即可，以下是两种可行的实现方案：

方案1：直接修改行内样式

直接在点击事件里同时修改p标签的内容和颜色属性，代码示例如下：

<!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;
}
p {
  color: blue;
  font-size: 20px;
}
</style>
</head>
<body>
  <p id="demo">Hello everyone! I will get changed after being clicked :)</p>
  <button onClick='
    const demoEle = document.getElementById("demo");
    demoEle.innerHTML = "I appear after clicking the button :P";
    demoEle.style.color = "green";
  ' class="xx">Click</button>
</body>
</html>

方案2：通过CSS类控制样式（更推荐）

提前在CSS里定义好点击后的样式类，点击时给p标签添加对应类即可，后续要调整样式只需要修改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;
}
p {
  color: blue;
  font-size: 20px;
}
/* 新增点击后的样式类 */
p.clicked {
  color: green;
}
</style>
</head>
<body>
  <p id="demo">Hello everyone! I will get changed after being clicked :)</p>
  <button onClick='
    const demoEle = document.getElementById("demo");
    demoEle.innerHTML = "I appear after clicking the button :P";
    demoEle.classList.add("clicked");
  ' class="xx">Click</button>
</body>
</html>

错误原因说明 #

你之前写的innerHTML(id="xx")是错误语法：

• innerHTML是DOM元素的属性，不是可以传递参数的方法，直接赋值即可修改元素内部内容
• 不需要为修改后的内容额外新增id，直接操作原来的#demo元素的样式就可以实现需求

内容的提问来源于stack exchange，提问作者pr0grammar