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

こんにちはtakosanです。

今回はボタンを押した時に、特定の要素の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");
      });

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

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

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

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を紹介しました。

自分自身、Web制作の初心者の頃には結構つまづいたので、

あまりつまづかずに学習できるよう端折らずに解説しました。

今後もjQueryシリーズをやって行こうと思いますので、

また時々訪れていただけると幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次