DOM 要素の属性操作

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

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

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

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

CSS クラスの取得と設定

具体例として 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');
	});
});

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

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

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

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