jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > DOM 要素の属性操作

DOM 要素の属性操作

ここでは jQuery で DOM 要素の属性を操作する方法を説明します。

ここで扱うのは、アトリビュート (attribute)、プロパティ (property) 及び CSS クラスです。

DOM アトリビュート操作の概要

jQuery では DOM アトリビュートを次のように分けて、操作します。

項目操作メソッド
アトリビュート取得attr()
設定
削除removeAttr()
プロパティ取得prop()
設定
削除removeProp()
CSS クラス取得css()
設定
存在確認hasClass()
追加addClass()
削除removeClass()
トグル (ON/OFF 切替え)toggleClass()

CSS クラスの取得と設定

具体例として CSS クラスを設定、削除する例をみてみましょう。

まず、CSSを次のように定義します。

<style style='text/css'>
.mymessage {background-color:#ff9; padding:20px; font-size:20px;}
.error {color:#f00; border:3px solid #f00;}
</style>

そして、次のようなテスト用の DIV 要素を設定します。

<div id='msg1' class='mymessage'>こんにちは! これはテストメッセージです。</div>

この ID が msg1 である Div 要素の CSS クラスを操作しましょう。

addClass でクラスを追加、removeClass でクラスを取り除き、toggleClass で、無かったら追加あれば削除します。 このように ON/OFF を切り替えることを 「トグルする」 という風にいいます。

$(document).ready( function() {
	$('#button1').click(function(){
		$('#msg1').addClass('error');
	});

	$('#button2').click(function(){
		$('#msg1').removeClass('error');
	});
	
	$('#button3').click(function(){
		$('#msg1').toggleClass('error');
	});
});

実際に動く例は次の通りです。

こんにちは! これはテストメッセージです。



複数の属性を一度に設定する方法

attr に複数の属性を一回のメソッド呼出しで設定するには、次のようにオブジェクトリテラルを用いて属性と値のペアを渡します。

$('#button4').click(function(){
  $('#msg2').css({
    'border': '5px red solid',
    'font-size': '20px',
    'font-weight': 'bold',
    'padding': '20px'
  });
});

これはテストです。

上の例では css メソッドを使って CSS を操作しましたが、 attr などでも同様です。

ホーム > jQuery の基礎 > DOM 要素の属性操作
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門