JavaScriptを使用してHTMLの同じ文字列の色を変更する方法

JavaScriptを使用してスタイルを直接変更する方法:

<!DOCTYPE html>
<html>
<body>
<p id="myText">Hello World!</p>
<button onclick="changeColor()">色を変更する</button>
<script>
function changeColor() {
  var element = document.getElementById("myText");
  element.style.color = "red";
}
</script>
</body>
</html>

上記のコードでは、changeColorというJavaScriptの関数を定義し、ボタンがクリックされるとmyTextというIDを持つ要素のテキスト色を赤色に変更しています。

CSSクラスを追加して色を変更する方法:

<!DOCTYPE html>
<html>
<head>
<style>
.redText {
  color: red;
}
</style>
</head>
<body>
<p class="redText">Hello World!</p>
<button onclick="addRedClass()">色を変更する</button>
<script>
function addRedClass() {
  var element = document.getElementsByTagName("p")[0];
  element.classList.add("redText");
}
</script>
</body>
</html>

上記のコードでは、redTextというCSSクラスを定義し、ボタンがクリックされると最初のp要素にそのクラスを追加しています。これにより、テキストの色が赤色に変更されます。

これらのコード例を参考にして、HTMLの同じ文字列の色を変更する方法を実装することができます。