[JS] スタイルを変更

タグ :

jQuery の勉強をまとめるシリーズです。
今回は「スタイルの変更」についてまとめます。

スタイルを変更するには、 html の要素の id や class 名を動的に変更させることで実現できます。
そのためにまずは、html 要素の指定の仕方からまとめたいと思います。

html 上の要素を指定する場合、JavaScript では「getElementID()」等のメソッドを使用しますが、jQuery では「セレクター」という API を使用することで簡単に検索・指定が可能です。

#id

html の要素を検索するときは主に id 属性を使用します。
CSS と同様に idを指定するときは「#」を付加します。

[ 構文 ]
$(“#ID名”)
[ コード ]
$(function() {
	$("#hello").click(function() {
		alert("Hello!");
	});
});

2行目の $() 内に ID 名を指定。

<h4>要素のidを指定</h4>
<button id="hello">あいさつ</button>

ボタンの id 名を設定。

button 要素にクリック時のイベントを登録しています。
ボタンをクリックしたときにアラート「Hello!」を表示します。

element

html の要素検索には、html の要素名(element)でも可能です。
例えば button 要素を検索するには、「$(“button”)」と記述します。

[ 構文 ]
$(“要素名”)
[ コード ]
$(function() {
	$("button").click(function() {
		alert("Hello!");
	});
});

2行目の $() 内に element 名を指定。

<h4>要素のidを指定</h4>
<button id="hello">あいさつ</button>

ボタンの id 名を設定。

html 上にボタンが一つだけの場合や、どのボタンを押されても同じ動作をさせたい場合には、element を使用するのが便利です
また、複数の button 要素から特定の button 要素を識別することも可能です。
以下のフィルタを使用します。
フィルタ名 説明
:first 先頭の要素を選択
:last 末尾の要素を選択
:not(selector) 指定したセレクターを除外した要素を選択
:eq(index) インデックス指定した要素を選択
:gt(index) 指定したインデックスより後の要素を選択
:lt(index) 指定したインデックスより前の要素を選択
:even 偶数番の要素を選択
:odd 奇数番の要素を選択
[ 構文 ]
$(“要素名:フィルター”)
[ コード ]
$(function() {
	$("button:first").click(function() {
		alert("Good Morning!");
	});
	$("button:eq(1)").click(function() {
		alert("Hello!");
	});
	$("button:last").click(function() {
		alert("Good Night!");
	});
});

2行目は一番目、5行目は二番目、8行目は三番目のボタンを意味する。

<h4>elementの指定</h4>
<button>朝のあいさつ</button>
<button>昼のあいさつ</button>
<button>夜のあいさつ</button>

ボタンを並べるだけ。

ボタンクリックでそれぞれに対応したアラートを表示します。

.class

html の要素検索でよく使うのが、class 属性を使用する方法です。
CSS と同様に class を指定するときは「.」を付加します。

[ 構文 ]
$(“.クラス名”)
[ コード ]
$(function() {
	$(".say").click(function() {
		alert("Hello! Hello!");
	});
});

2行目の $() 内に クラス名を指定。

<h4>要素のclassを指定</h4>
<button class="say">あいさつ</button>

ボタンのクラス名を設定。

ボタンクリックでアラート「Hello! Hello!」を表示します。

複数要素の指定とスタイルの変更

セレクターで異なるタグを検索するには、コンマ区切りで要素名を指定します。
例えば、div、p、span要素を検索するには、「$(“div,p,span”)」と記述します。
ここからがスタイルを変更する方法になるのですが、変更するには適用するスタイルシートも作成しておく必要があります。

[ 構文 ]
$(“要素名, 要素名, …”)
[ コード ]
$(function() {
	$(".change").click(function() {
		$("div,p,span").addClass("bg_blue");
	});
});

3行目の addClass() で指定した要素へクラスの追加を行います。

<h4>スタイルを変更</h4>
<div>あいさつ</div>
<p>Hello!</p>
<span>昼のあいさつ</span>
<button class="change">変更</button>

それぞれの要素のスタイルを変更します。

.bg_blue {
	background: blue;
}
<div class="bg_blue">あいさつ</div>
<p class="bg_blue">Hello!</p>
<span class="bg_blue">昼のあいさつ</span>

それぞれの要素にクラスが追加されます。

ボタンクリックで html 要素(div、p、span)のそれぞれに「bg_blue」という名前のクラスを追加します。
「bg_blue」というクラスの CSS には「背景色を青」にする設定としており、クリック後はそのクラスが反映されます。

まとめ

jQuery を使用することで、こんなにも簡単にスタイルの変更が可能となります。
今回は背景色を変更するだけでしたが、基本的にスタイルを変更する場合は、同じように予め作成しておいたスタイルシートを動的に適用させる方法をとります。

要素に直接スタイルを追加するという方法もありますが、スタイルの指定が多数ある場合は、クラスの追加によるスタイルの適用が一番お手軽だと思います。
スタイルの直接変更については後にまとめたいと思います。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed