トップページ >  jQuery >  スタイルの変更
初版2011/10/17: 最終更新日2011/10/17
スタイルの変更
目次
スタイルの変更
CSS制御
クラス制御
位置制御
サイズ制御
スタイルの変更

WEBアプリケーションで、視覚的な変更を簡潔に行う方法は、スタイル(シート)の変更です。
古いHTMLでは、色や形状、レイアウトすべてが要素タグとその属性で取り扱う必要がありました。
しかし、最近のWEBページのほとんどは、CSS(カスケードスタイルシート)を用いて包括的にデザインを扱っています。

jQueryでは、CSSを扱う独自のメソッドがあります。
このメソッドを利用して、特定の要素(jQueryオブジェクト)にスタイルを適用することが可能です。

リスト1. スタイルの変更例

function Sample11(){
	jQuery('.Sample11 li').filter(':first,:last').css('border','1px solid red');
}
  • 項目-1
  • 項目-2
  • 項目-3

また、特定の要素(jQueryオブジェクト)にCSSクラスを追加したり、削除したりしてスタイルを変更することも可能です。

リスト2. クラスの変更例

function Sample12(){
	jQuery('.Sample12 li').filter(':first,:last').addClass('RedWraper');
}
  • 項目-1
  • 項目-2
  • 項目-3

CSS制御

選択した要素のCSSの内容を取得したり、CSSを適用します。

css(name)
指定した要素の内、最初の要素の name で指定されたスタイルの値を取得します。
返り値:スタイル値(文字列)

リスト3. css(name)

function Sample23(){
	var str = '各li要素は\n';
	// li要素
	jQuery('.Sample23 li').each(function(index){
		// スタイル(color)の取得
		var css = jQuery(this).css('color');
		str = str + 'li[' + index + ']:' + css + '\n';
	});
	alert(str);
	
}

実装例

 
css(name,value)
指定した要素のスタイル name にスタイルの値 value を適用します。
valueの値が数値の場合の単位はピクセルになります。
返り値:jQueryオブジェクト

リスト4. css(name,value)

function Sample24(){
	// li要素の内、最初と最後の文字を赤太文字に
	jQuery('.Sample24 li').filter(':first,:last').css('color','red').css('font-weight','bold');
	
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
 
css(properties)
指定した要素に、ハッシュ properties で定義されたスタイルを適用します。
返り値:jQueryオブジェクト

リスト5. css(properties)

function Sample25(){
	// li要素の内、最初と最後の文字を赤太文字に
	jQuery('.Sample25 li').filter(':first,:last').css(
		{
			color		: 'red',
			fontWweight	: 'bold'
		}
	);
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
※CSSプロパティで指定する場合、「font-weight」などは「fontWeight」で指定する必要があります。
クラス制御

選択した要素にクラスを追加したり、削除して、CSSを適用します。
クラスの制御は、CSSの適用だけでなく、jQueryプラグイン の適用などにも使われます。

なお、「DOM要素の属性変更」でも対応可能です。
しかし、対象要素群に複数のクラスが混在して存在する場合に一部変更する場合、クラス制御を用いた方が簡潔です。

addClass(クラス名)
指定した要素のclass属性に、クラス名を追加します。
返り値:スタイル値(文字列)

リスト6. addClass(クラス名)

function Sample36(){
	// li要素の内、最後の要素のclass属性
	var before = jQuery('.Sample36 li:last').attr('class');
	// li要素の内、最初と最後に「RedWraper」クラスを追加
	jQuery('.Sample36 li').filter(':first,:last').addClass('RedWraper');
	// li要素の内、最後の要素のclass属性の遷移
	alert( before + '→' + jQuery('.Sample36 li:last').attr('class'));
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
 
removeClass(クラス名)
指定した要素のclass属性から、クラス名を削除します。
複数のクラスが設定されていても、指定したクラス名だけを削除します。
返り値:スタイル値(文字列)

リスト7. removeClass(クラス名)

function Sample37(){
	// li要素の内、最後の要素のclass属性
	var before = jQuery('.Sample37 li:last').attr('class');
	// li要素の内、最初と最後に「RedWraper」クラスを削除
	jQuery('.Sample37 li').filter(':first,:last').removeClass('RedWraper');
	// li要素の内、最後の要素のclass属性の遷移
	alert( before + '→' + jQuery('.Sample37 li:last').attr('class'));
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
 
toggleClass(クラス名[, switch])
指定した要素のclass属性に、クラス名があれば削除し、なければ追加します。
もし、switch の指定がある場合、switchがtureの時に追加、falseの時は削除します。
このメソッドは、スタイルのスイッチングに大変よく利用します。
返り値:スタイル値(文字列)

リスト8. toggleClass(クラス名[, switch])

function Sample38(){
	var now = new Date();
	var sec = now.getSeconds();
	// li要素の内、最後の要素のclass属性
	var before = jQuery('.Sample38 li:first').attr('class');
	// 最初のli要素に「RedWraper」クラスを切替
	jQuery('.Sample38 li:first').toggleClass('RedWraper');
	// 最後のli要素に「RedWraper」クラスを切替。但し、現在秒が3で割り切れる時のみ
	jQuery('.Sample38 li:last').toggleClass('RedWraper',(sec % 3 == 0));
	// li要素の内、最初の要素のclass属性の遷移
	alert(	'現在秒:' + sec + '\n' +
			before + '→' + jQuery('.Sample38 li:first').attr('class'));
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
位置制御

選択した要素の位置の取得や設定をします。

offset()
指定した要素の内、最初の要素のドキュメント内での表示位置を取得します。
このメソッドは、可視状態にある要素に対してのみ有効です。
返り値:ドキュメント内位置(オブジェクト)
    {
     top : トップ位置,
     left: 左位置
    }

リスト9. offset()

function Sample49(){
	// Sample49のドキュメント内の位置
	var offset = jQuery('.Sample49').offset();
	alert('top=' + offset.top + '\nleft=' + offset.left);
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
 
position()
指定した要素の内、最初の要素の親要素からの表示位置を取得します。
このメソッドは、可視状態にある要素に対してのみ有効です。
返り値:親要素からの位置(オブジェクト)
    {
     top : トップ位置,
     left: 左位置
    }

リスト10. position()

function Sample410(){
	// Sample410の親要素からの位置
	var pos = jQuery('.Sample410').position();
	alert('top=' + pos.top + '\nleft=' + pos.left);
}

実装例

  • 項目-1
  • 項目-2
  • 項目-3
 
scrollTop([val])
引数無しの場合、最初の要素の現在のスクロール上の上位置を取得します。
引数有りの場合、合致する全ての要素のスクロール上位置を指定します
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
返り値:引数無しの場合、上下スクロール位置(ピクセル)
    引数有りの場合、jQueryオブジェクト

リスト11. scrollTop([val])

function Sample411(){
	// スクロールを10px下げ
	var y =jQuery('div.Sample411').scrollTop();
	jQuery('div.Sample411').scrollTop( y + 10 );
}
// スクロール位置の取得
jQuery('div.Sample411').scroll(function(){
  $('p.Sample411 span').text(jQuery(this).scrollTop());
});

実装例

スクロール:

1行目
2行目
3行目
4行目
5行目
6行目
7行目
8行目
 
scrollLeft([val])
引数無しの場合、最初の要素の現在のスクロール上の左位置を取得します。
引数有りの場合、合致する全ての要素のスクロール左位置を指定します
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
返り値:引数無しの場合、左右スクロール位置(ピクセル)
    引数有りの場合、jQueryオブジェクト

リスト12. scrollLeft([val])

function Sample412(){
	// スクロールを10px右へ
	var x =jQuery('div.Sample412').scrollLeft();
	jQuery('div.Sample412').scrollLeft( x + 10 );
}
// スクロール位置の取得
jQuery('div.Sample412').scroll(function(){
  $('p.Sample412 span').text(jQuery(this).scrollLeft());
});

実装例

スクロール:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
サイズ制御

選択した要素のサイズ(幅や高さ)の取得や設定をします。

width([val])
引数無しの場合、最初の要素の「幅」(ピクセル)を取得します。
引数有りの場合、合致する全ての要素の「幅」を指定します
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
引数は数値のみです。単位の指定はできません。
返り値:引数無しの場合、要素の幅(ピクセル)
    引数有りの場合、jQueryオブジェクト

リスト13. width([val])

function Sample513(){
	// 変更前の幅
	var w0 = jQuery('div.Sample513').width();
	// 幅+10px
	jQuery('div.Sample513').width( w0 + 10 );
	alert('幅=' + w0 + '→' + ( w0 + 10 ));
}

実装例

width([val])
 
height([val])
引数無しの場合、最初の要素の「高さ」(ピクセル)を取得します。
引数有りの場合、合致する全ての要素の「高さ」を指定します
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
引数は数値のみです。単位の指定はできません。
返り値:引数無しの場合、要素の高さ(ピクセル)
    引数有りの場合、jQueryオブジェクト

リスト14. height([val])

function Sample514(){
	// 変更前の高さ
	var h0 = jQuery('div.Sample514').height();
	// 高さ+10px
	jQuery('div.Sample514').height( h0 + 10 );
	alert('高さ=' + h0 + '→' + ( h0 + 10 ));
}

実装例

height([val])
 
innerWidth()
最初の要素の「内側幅」(ピクセル)を取得します。
borderは除き、paddingは含みます。
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
返り値:要素の内側幅(ピクセル)

リスト15. innerWidth()

function Sample515(){
	// 変更前の幅
	var w0 = jQuery('div.Sample515').width();
	// 幅+10px
	jQuery('div.Sample515').width( w0 + 10 );
	// 内側幅
	var w = jQuery('div.Sample515').innerWidth();
	alert('幅=' + w0 + '→' + ( w0 + 10 ) + '\n内側幅=' + w);
}

実装例

innerWidth()
 
innerHeight()
最初の要素の「内側高さ」(ピクセル)を取得します。
borderは除き、paddingは含みます。
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
返り値:要素の内側高さ(ピクセル)

リスト16. innerHeight()

function Sample516(){
	// 変更前の高さ
	var h0 = jQuery('div.Sample516').height();
	// 高さ+10px
	jQuery('div.Sample516').height( h0 + 10 );
	// 内側高さ
	var h = jQuery('div.Sample516').innerHeight();
	alert('高さ=' + h0 + '→' + ( h0 + 10 ) + '\n内側高さ=' + h);
}

実装例

innerHeight()
 
outerWidth([options])
最初の要素の「外側幅」(ピクセル)を取得します。
border、paddingは含みます。
options(オブジェクト)に、「{margin:true}」をセットするとマージンも含みます。
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
返り値:要素の外側幅(ピクセル)

リスト17. outerWidth([options])

function Sample517(){
	// 変更前の幅
	var w0 = jQuery('div.Sample517').width();
	// 幅+10px
	jQuery('div.Sample517').width( w0 + 10 );
	// 外側幅
	var w = jQuery('div.Sample515').outerWidth();
	var w1 = jQuery('div.Sample515').outerWidth({margin:true});
	alert('幅=' + w0 + '→' + ( w0 + 10 ) + '\n外側幅=' + w + '\nマージン込み=' + w1);
}

実装例

outerWidth([options])
 
outerHeight([options])
最初の要素の「外側高さ」(ピクセル)を取得します。
border、paddingは含みます。
options(オブジェクト)に、「{margin:true}」をセットするとマージンも含みます。
このメソッドは、要素の表示/非表示状態にかかわらず機能します。
返り値:要素の外側高さ(ピクセル)

リスト18. outerHeight([options])

function Sample518(){
	// 変更前の高さ
	var h0 = jQuery('div.Sample518').height();
	// 高さ+10px
	jQuery('div.Sample518').height( h0 + 10 );
	// 内側高さ
	var h = jQuery('div.Sample518').outerHeight();
	var h1 = jQuery('div.Sample518').outerHeight({margin:true});
	alert('高さ=' + h0 + '→' + ( h0 + 10 ) + '\n外側高さ=' + h + '\nマージン込み=' + h1);
}

実装例

outerHeight([options])