| 目次 |
|---|
|
・スタイルの変更 ・CSS制御 ・クラス制御 ・位置制御 ・サイズ制御 |
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を適用します。
リスト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);
}
実装例
リスト4. css(name,value)
function Sample24(){
// li要素の内、最初と最後の文字を赤太文字に
jQuery('.Sample24 li').filter(':first,:last').css('color','red').css('font-weight','bold');
}
実装例
リスト5. css(properties)
function Sample25(){
// li要素の内、最初と最後の文字を赤太文字に
jQuery('.Sample25 li').filter(':first,:last').css(
{
color : 'red',
fontWweight : 'bold'
}
);
}
実装例
選択した要素にクラスを追加したり、削除して、CSSを適用します。
クラスの制御は、CSSの適用だけでなく、jQueryプラグイン の適用などにも使われます。
なお、「DOM要素の属性変更」でも対応可能です。
しかし、対象要素群に複数のクラスが混在して存在する場合に一部変更する場合、クラス制御を用いた方が簡潔です。
リスト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'));
}
実装例
リスト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'));
}
実装例
リスト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'));
}
実装例
選択した要素の位置の取得や設定をします。
リスト9. offset()
function Sample49(){
// Sample49のドキュメント内の位置
var offset = jQuery('.Sample49').offset();
alert('top=' + offset.top + '\nleft=' + offset.left);
}
実装例
リスト10. position()
function Sample410(){
// Sample410の親要素からの位置
var pos = jQuery('.Sample410').position();
alert('top=' + pos.top + '\nleft=' + pos.left);
}
実装例
リスト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());
});
実装例
スクロール:
リスト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());
});
実装例
スクロール:
選択した要素のサイズ(幅や高さ)の取得や設定をします。
リスト13. width([val])
function Sample513(){
// 変更前の幅
var w0 = jQuery('div.Sample513').width();
// 幅+10px
jQuery('div.Sample513').width( w0 + 10 );
alert('幅=' + w0 + '→' + ( w0 + 10 ));
}
実装例
リスト14. height([val])
function Sample514(){
// 変更前の高さ
var h0 = jQuery('div.Sample514').height();
// 高さ+10px
jQuery('div.Sample514').height( h0 + 10 );
alert('高さ=' + h0 + '→' + ( h0 + 10 ));
}
実装例
リスト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);
}
実装例
リスト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);
}
実装例
リスト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);
}
実装例
リスト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);
}
実装例