7月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
6月受入枠は満員となっております。7月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!

みなさんは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')と記述する。

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({'プロパティ':'','プロパティ':''});

サンプル


<!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>

まとめ

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

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

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

7月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
6月受入枠は満員となっております。7月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!


▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら!

おすすめの記事