【jQuery】jQueryでCSSを操作する方法

jQueryを活用することによって、ページのCSSを動的に変化させることができます。今回は、target-buttonクラスを持つボタンを押したときに、target-textの色が変わるようなjQueryの使い方を紹介します。

ソースコード

結論から言うと、下のようなソースコードで実現することができます。

See the Pen
oNvqEoq by Keita (@tfpiyfit)
on CodePen.

コードの解説

それでは、上のコードについて解説していきます。

$(function(){
  $('.target-button').click(function(){
    $('.target-text').css('color', '#f00');
  });
});

$(function){}は、すべてのhtml要素を読み込んでから{}内の処理を行うという記述です。jQueryはhtml要素に対して動作するものなので、htmlの読み込みが終わる前に実行するとエラーが起こりやすくなるのです。

また、$(‘.target-button’).click(function()は、target-buttonというクラスを持つ要素をクリックしたときにイベント発火するという指定です。

そして、$(‘target-text’).css(‘color’, ‘#f00’);によって、target-textのクラスを持つ要素の色を赤(#f00)に変えます。

このように、jQueryではセレクタ$()のあとにメソットをつなげることで、さまざまな操作を行うことができます。