[入門]JavaScript(jQuery)でCSSを変更する方法

2020年5月15日

jsでCSSを変更したい局面は往々にあると思います。今回はjs（jQuery）でCSSを変更する方法を紹介したいと思います。入門！

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第9回目！　

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

JavaScriptでCSSをいじる。

さっそくいきましょう！まずは生のjsからご紹介。

  <button id="btnTest">ボタン</button>//ただのボタン
    

  var element = document.getElementById("btnTest");
  
  element.style.fontSize = '50px';
  element.style.color = 'red';

こんな感じで、要素を取得して、そのオブジェクトを利用して、CSSの値を書き換えます。

でも、結構めんどくさいですよね。一行でスパーンッと処理したいですよね。jQueryではもっと簡単に書けます。

jQueryでCSSを変更する。

さっそくいきましょう。

  <button id="btnTest">ボタン</button>//ただのボタン
    

  $('#id').css('color', 'red');//パターン①

  //パターン② 複数個選択する時
  $('#id').css({
      'color':'red',
      'font-size':'50px',
      'background-color':'green'
  });

一行でシンプルに書くことができます。また複数個選択する時も、簡単にできるので、おすすめです。

jQueryは、(js自体もそうですが、)

「何かをセレクトする」　＋「その要素をどうするか」

が基本形です。　要素の取得方法をいろいろありますが、基本的なものだけ紹介しておきます。以下

	html要素で取得　 →   $('p').css();//p要素すべてをセレクトしている
    id要素で取得　   →   $('#hoge').css();//id名がhogeのものを取得している
    class名で取得   →　  $('.hoge').css();//class名がhogeのものを取得している

他の要素の値を、代入することもできます。以下では、xxxをyyyと同じ高さにしています。

      var xxxHeight = $(".xxx").css('height');//クラスxxxの要素を取得
      $('.yyy').css('height',xxxHeight);//クラスyyyに代入

こういうのをみると、JavaScriptってすごいなーって思います。レイアウトに”動きをつける”とはまさにこのことか。

最後に

jsでcssを操作するのは基本スキルだと思いますので、ぜひとも覚えておきたい！

Harumaki

僕は今でも、ふと忘れてしまい、ググる時があります。。。笑

今回は以上です。 　

自作Webサービスのアクアリウム専門の質問サイト　　→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。 次回もお楽しみに〜。