jQueryオブジェクトが保持しているDOM要素にCSSを設定したりする。いろいろとパターンがある。
.css( propertyName )
引数
- (String)propertyName
- CSSプロパティ名
戻り値
- String
- 数値であっても型はString
propertyNameで指定したCSSのプロパティの値を取得する。
サンプル
Javascript
var t = '';
$('.jqTest1 li').each(function(){
t += $(this).css('background-color') + '<br />';
});
$('.jqTest1 .execute').click(function(){
$('.jqTest1').append(t);
});
HTML
<div class="jqTest1">
<input type="button" value="execute" class="execute" />
<ul>
<li style="background-color:blue;">param()テスト</li>
<li style="background-color:rgb(15,99,30);">param()テスト</li>
<li style="background-color:#123456;">param()テスト</li>
<li style="background-color:#f11;">param()テスト</li>
</ul>
</div>
.css( map )
引数
- (object) Map
- キー/値のペア(ハッシュ)
jQueryオブジェクトのCSSをキー/値を持つハッシュで設定する。まとめて設定できるので便利。
複数単語のプロパティ名(border-leftなどハイフンで区切られてるやつ)は、キーを''で囲まないと認識しない。ただ面倒なのでLCCで記述することがおおい。
またプロパティの値を空にすると設定値が初期設定に戻る。
サンプル
Javascript
$('.jqTest2 .execute1').click(function(){
$('.jqTest2 li').css( { color: '#FFFFFF', 'background-color': '#000000' });
});
$('.jqTest2 .execute2').click(function(){
$('.jqTest2 li').css( { color: '#FFFFFF', backgroundColor: '#CC9900' });
});
$('.jqTest2 .execute3').click(function(){
$('.jqTest2 li').css( { color: '', backgroundColor: '' });
});
HTML
<div class="jqTest2">
<input type="button" value="execute1" class="execute1" />
<input type="button" value="execute2" class="execute2" />
<input type="button" value="execute3" class="execute3" />
<ul>
<li>css(properties)テスト</li>
</ul>
</div>
.css( propertyName, value )
引数
- (String)propertyName
- CSSのプロパティ名
- (String|number) value
- CSSプロパティの値
propertyNameとvalueでCSSの設定をおこなう。
サンプル
Javascript
$('.jqTest3 li').each(function(i){
if (i == 0) {
$(this).mouseover(function(){
$(this).css('border', '1px solid #000000');
});
} else if (i == 1) {
$(this).mouseover(function(){
$(this).css('background-color', '#CCCCCC');
});
} else if (i == 2) {
$(this).mouseover(function(){
$(this).css('color', '#00FFFF');
});
}
});
HTML
<div class="jqTest3">
<ul>
<li>border</li>
<li>background</li>
<li>color</li>
</ul>
</div>
1.4からvalueに関数を設定できるようになった。関数を設定した場合、第一引数にはindex、第二引数には設定しようとしているCSSプロパティの現在の値が渡される。
関数内でthisはCSSを設定するDOM要素となるのでCSSの設定以外も出来たりする。まぁわかりにくいコードになるだけの気もしますがw
さらにjQuery 1.6からは.animate()で利用されるような、現在の値に加算(+=)、減算(-=)ができるようになった。
サンプル
Javascript
$('.jqTest4 li').css({
display: 'inline-block',
width: '100px',
margin: '10px',
backgroundColor: '#E5E5E5'
});
$('.jqTest4 .execute1').click(function(){
$('.jqTest4 li').css('height', function(index, height){
$(this).css('width', function(index2){
return '-=' + 10;
});
$(this).click(function(e){
alert($(e.target).height());
});
return '+=' + index * 10;
});
});
HTML
<div class="jqTest4">
<input type="button" value="execute1" class="execute1" />
<ul>
<li>css(properties)テスト1</li>
<li>css(properties)テスト2</li>
<li>css(properties)テスト3</li>
<li>css(properties)テスト4</li>
<li>css(properties)テスト5</li>
<li>css(properties)テスト6</li>
</ul>
</div>