WEBアプリケーションで、視覚的な変更を簡潔に行う方法は、スタイル(シート)の変更です。
古いHTMLでは、色や形状、レイアウトすべてが要素タグとその属性で取り扱う必要がありました。
しかし、最近のWEBページのほとんどは、CSS(カスケードスタイルシート)を用いて包括的にデザインを扱っています。
jQueryでは、CSSを扱う独自のメソッドがあります。
このメソッドを利用して、特定の要素(jQueryオブジェクト)にスタイルを適用することが可能です。
リスト1. スタイルの変更例
function Sample11(){
jQuery('.Sample11 li').filter(':first,:last').css('border','1px solid red');
}
スタイルの変更例
また、特定の要素(jQueryオブジェクト)にCSSクラスを追加したり、削除したりしてスタイルを変更することも可能です。
リスト2. クラスの変更例
function Sample12(){
jQuery('.Sample12 li').filter(':first,:last').addClass('RedWraper');
}
クラスの変更例
選択した要素の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);
}
実装例
リスト3の実行
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');
}
実装例
リスト4の実行
css(properties)
指定した要素に、ハッシュ properties で定義されたスタイルを適用します。
返り値:jQueryオブジェクト
リスト5. css(properties)
function Sample25(){
// li要素の内、最初と最後の文字を赤太文字に
jQuery('.Sample25 li').filter(':first,:last').css(
{
color : 'red',
fontWweight : 'bold'
}
);
}
実装例
リスト5の実行
※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'));
}
実装例
リスト6の実行
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'));
}
実装例
リスト7の実行
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'));
}
実装例
リスト8の実行
選択した要素のサイズ(幅や高さ)の取得や設定をします。
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])
リスト13の実行
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])
リスト14の実行
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()
リスト15の実行
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()
リスト16の実行
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])
リスト17の実行
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])
リスト18の実行