JavaScript
PC SAURUS

JavaScript　クリックしたら文字色が変化する　jQueryとJavaScriptのコード

この記事の紹介

  • 文字列をクリックしたら文字色が変わる
  • クリックのたびに交互に色を変える
  • JavaScriptとjQueryでの両方でのコードの書き方
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>

  <body>
    <p id="p" id="e">文字色</p>
    <script src="src/index.js"></script>
  </body>
</html>

まずは、HTMLでブラウザに表記される文字を作成します
CSSファイルも用意します

id名適当で申し訳ないです　id名は大切です！
.is-active {
  color: red;
}

jQuery　toggleClassメソッド

$("p").on('click',function(){
  $(this).toggleClass("is-active")
})
toggleClass()

クラス要素のつけ外し

$('要素名').toggleClass('クラス名');

ここでは、clickイベントで使用しているので、クリックされる度にメソッドが発動します
classはcssで宣言しています

JavaScriptでの記述

jQueryで書けてそれでよければ問題ないのですが、JavaScriptで書いてみたい人もいるはずなので参考にどうぞです！！

まず、自分が試したこととして...

document.getElementById('p').style.color = "red"

と、書いてみました
結果→文字色が赤くなっただけで、jQueryで書いたようにクリックイベントが発動しません
この書き方では、idを取得し、styleで'p'をredに変えただけですね^^;

onclick

onclickを使ってイベントを発生させてみましょう

document.getElementById("p").onclick = () => {
  ここにクリックしたら発生させる処理を記述します
};
classList.toggle()
document.getElementById("p").onclick = () => {
  document.getElementById("p").classList.toggle("is-active");
};

このように書けばp要素をクリックする度にclassが切り替わり、文字色が黒⇆赤に切り替わります

JavaScript　MDN

JavaScript　チュートリアル

jQuery　チュートリアル

おすすめの記事