如何在点击文本时更改文本的颜色和/或装饰

<p id="myText">这是需要点击的文本</p>

#myText:hover {
  color: red; /* 鼠标悬停时的文本颜色 */
  text-decoration: underline; /* 鼠标悬停时的文本装饰 */
}

#myText:focus {
  color: blue; /* 文本被选中时的文本颜色 */
  font-weight: bold; /* 文本被选中时的文本装饰 */
}

<p id="myText" style="color: black; text-decoration: none;" onclick="changeColor()">这是需要点击的文本</p>

<style>
  #myText {
    color: black;
    text-decoration: none;
  }
</style>
<p id="myText" onclick="changeColor()">这是需要点击的文本</p>

<link rel="stylesheet" href="styles.css">
<p id="myText" onclick="changeColor()">这是需要点击的文本</p>

function changeColor() {
  var text = document.getElementById("myText");
  text.style.color = "green"; // 修改文本颜色
  text.style.textDecoration = "underline"; // 修改文本装饰
  // 执行其他操作...
}