【初心者入門】jQueryでCSSを変更する方法を解説!

2021.09.09

みなさんはCSSやjQueryの学習をしていませんか?

jQueryを活用している時に、CSSを変更した時もありますよね?

今回の記事ではjQueryでCSSを変更する方法を解説します!

jQueryでCSS変更可能です

CSSは本来なら、WEBページファイルであるHTMLファイル内や、別のCSS専用ファイルを用いて定義するのが一般的です。

ですが、javascript上から、何らかの動作時に背景色を変えたい、動きを付けたいという場合にも変更することがあります。ここでは、javascriptの中でもまだ本流で使われているjQueryからのCSS変更方法をご紹介します。

jQueryとは

jQuery(ジェイクエリー)は、JavaScriptコードをより簡単に記述できるようにするために設計されたJavaScriptライブラリの一つです。通常のJavaScriptのままでは煩雑化・複雑化するコード内容を簡潔に記述できるのが魅力です。

jQueryの事前知識

jQueryの詳しい説明は省略しますが、今回は以下だけ把握しておけば理解可能です。覚えておいてください。

1.要素に対して操作する場合:例えばp要素を指定する場合には、$(‘p’)と記述する。

2.CSSのclassセレクタに対して操作する場合:例えば、testクラスを指定する場合には、$(‘.test’)と記述する。

3.CSSのidセレクタに対して操作する場合:例えば、idが「test」を指定する場合には、$(‘#test’)と記述する。


「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

jQueryでCSSを設定する

実際のコードをご紹介します。

HTML内の要素にstyle属性を直接設定する場合

その場合は、cssメソッドを使用します。

1. ひとつのプロパティの場合

$(‘要素’).css(‘プロパティ’,’値’);

2.複数のプロパティの場合

$(‘要素’).css({‘プロパティ’:’値’,’プロパティ’:’値’});

HTML内の要素にclassセレクタを追加、削除

その場合はaddClass及びremoveClassメソッドを使用します。

1.要素にClassセレクタを追加する

$(‘要素’).addClass(‘class名’);

2.要素についているClassセレクタを削除する

$(‘要素’).removeClass(‘css名’);

classセレクタまたはidセレクタのプロパティを追加(変更)

その場合は、cssメソッドでプロパティで追加または変更します。cssを追加する時に既に指定されていた場合でも上書きされこの指定が有効になります。

1. ひとつのプロパティの場合

$(‘class名’).css(‘プロパティ’,’値’);
$(‘id名’).css(‘プロパティ’,’値’);

2.複数のプロパティの場合

$(‘class名’).css({‘プロパティ’:’値’,’プロパティ’:’値’});
$(‘id名’).css({‘プロパティ’:’値’,’プロパティ’:’値’});

classセレクタまたはidセレクタのプロパティの削除

その場合は、cssメソッドでプロパティの追加を行う際に値を指定しないことで削除できます。

1. ひとつのプロパティの場合

$(‘class名’).css(‘プロパティ’,”);
$(‘id名’).css(‘プロパティ’,”);

2.複数のプロパティの場合

$(‘class名’).css({‘プロパティ’:”,’プロパティ’:”});
$(‘id名’).css({‘プロパティ’:”,’プロパティ’:”});

サンプル

HTML
<!DOCTYPE html>
<html>
<head>
<title>jquery-CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#box1{
width: 130px;
height: 80px;
border:1px solid #000;
text-align:center;
font-size:14px;
}
.boxadd {
font-weight:bold;
}
</style>
<script>
$(function() {
// ボタン1 (背景色を黄色に、文字サイズを12pxに指定)
$("#button1").click(function() {
$("#box1").css({
'background-color':'yellow',
'font-size' :'12px'
});

});

// ボタン2 (背景色を緑色に、文字サイズを16pxに指定)
$("#button2").click(function() {
$("#box1").css({
'background-color':'lightgreen',
'font-size' :'16px'
});
});

// ボタン3 (クラスboxaddを追加)
$("#button3").click(function() {
$("#box1").addClass('boxadd');

});

// ボタン4 (クラスboxaddを削除)
$("#button4").click(function() {
$("#box1").removeClass('boxadd');

});

});
</script>
</head>
<body>
<div id="box1">ボックス1</div>
<input type="button" id="button1" value="ボタン1" /><br/>
<input type="button" id="button2" value="ボタン2" /><br/>
<input type="button" id="button3" value="ボタン3" /><br/>
<input type="button" id="button4" value="ボタン4" /><br/>
</body>
</html>


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

まとめ

jQueryでCSSを設定する方法を紹介していきましたが、いかがでしたか?

こういうシュチュエーションも実務だと想定されますので、この機会にぜひ使いこなしてみてくださいね!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5