ボタンクリックでCSSを変更する方法

今回はボタンを押した時に、特定の要素のCSSを変更する方法を紹介します。

サンプル

See the Pen jQuery-basic01 by yukiwebcreate (@Yukiwebcreate) on CodePen.

こちらがサンプルです。

Color01,Color02,Color03のそれぞれのボタンを押すことで、

四角の中の色が変わります。

解説

今回はとても簡単なjQueryで書いています。

解説の前に

jQueryと書いてある部分について

「＄でもいいんじゃないの？」と思った方。

jQueryは確かに$と書いても同じものなので、正解です。

ただし$では他の言語やプログラムと衝突することがあります。

というわけでここではより正確に動作する書き方をするため、jQueryで統一しています。

要素の指定

さて、コードの解説をしていきましょう。

まずはjQueryのコードです。

　　　　jQuery(".cl01").click(function(){
        jQuery(".square").css("background","#a6d399");
      });
      jQuery(".cl02").click(function(){
        jQuery(".square").css("background","#9bc3e4");
      });
      jQuery(".cl03").click(function(){
        jQuery(".square").css("background","#8a7ff0");
      });

これらは３つのボタンの挙動を指定しているものですが、全て色が違うだけで

基本的には「色を変える」という動きをするものです。

一つだけ切り取って確認してみましょう。

jQuery(".cl01").click(function(){
        jQuery(".square").css("background","#a6d399");
      });

jQueryの後の(“.cl01”)はボタンです。

.clickは「それが押された時」をトリガーとしているということです。

function()はその際のイベントの中身です。

その中身に何が書かれているかというと、

jQuery(".square").css("background","#a6d399");

.squareというクラス(今回でいう四角い枠内)のcssの”background”プロパティの値を”#a6d399″に変更するという意味のコードが書かれています。

つまりこのコードを人間の言葉で言うなら

「cl01っていうボタンを押したらsquareの背景色が#a6d399になるようにしてね」

ってことを書いてます。

まとめ

今回は超絶簡単なjQueryを紹介しました。参考になれば幸いです。