基金訓練に行ってきました。(61日目)

css()メソッドを使用してスタイルシートを書き換えます。

プログラム例

script部
$(function() {
$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′);
$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’);
});

HTML部
<table class="table">
<tr>
<td>真弓</td><td>34本</td>
</tr>
<tr>
<td>バース</td><td>54本</td>
</tr>
<tr>
<td>掛布</td><td>40本</td>
</tr>
<tr>
<td>岡田</td><td>35本</td>
</tr>
</table>

説明

$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′)

class="table"のtrタグの奇数番目のタグに、style="background-color:#ffffe0"を、書き加えます。

$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’)

class="table"のtrタグの偶数番目のタグに、style="background-color:#ffddff"を、書き加えます。

結果

※これをスタイルシートで実現しようとすると、すべてのtrタグにクラス指定する必要があります。
また、真ん中で行を足すと、それ以降のtrタグのクラス名を変更しなくてはなりません。
なので、このような表を作る時は、jQueryが非常に有効です。

CSSプロパティを一括して指定できます。

プログラム例

script部
$(function() {
　　$(‘ .button’) .click(function() {
　　　　$(‘.contents p’).css({
　　　　　　’fontSize’:’150%’,
　　　　　　’fontWeight’:’bold’,
　　　　　　’color’:’#ff0000′
　　　　});
　　　　$(‘.contents li’).css({
　　　　　　’color’:’#0000ff’,
　　　　　　’backgroundColor’:’#99ff99′
　　　　});
　　});
});

HTML部
<div class="contents">
<input class="button" type="button" value="書き換え" />
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>

説明

$(‘.contents p’).css({
　　　　　　’fontSize’:’150%’,
　　　　　　’fontWeight’:’bold’,
　　　　　　’color’:’#ff0000′
　　　　})

class="contents"のpタグに style="font-size:150%;font-weight:bold;color:#ff0000" を書き加えます。

結果

CSSのクラスを追加、削除、切り替えします。

プログラム例

script部
$(function() {
　　$(‘.contents .button’) .click(function() {
　　　　$(‘.contents li:first’).addClass(‘futo’);
　　　　$(‘.contents li:eq(1)’).removeClass(‘ao’);
　　　　$(‘.contents li:last’).toggleClass(‘aka’);
　　});
});

CSS部

li.futo {
font-weight:bold;
}
li.aka {
color:red;
}
li.ao {
color:blue;
}

HTML部
<div class="contents">
<input class="button" type="button" value="書き換え" />
<ul>
<li>li の中身</li>
<li class="ao">li の中身</li>
<li>li の中身</li>
</ul>
</div>

説明

$(‘#contents li:first’).addclass(‘futo’)

class="contents"の最初のliタグに、class="futo"を書き加えます。

$(‘#contents li:eq(1)’).addclass(‘futo’)

class="contents"の1番目(最初のタグが0番目)のliタグに、class="ao"を書き加えます。

$(‘#contents li:last’).addclass(‘futo’)

class="contents"の最後のliタグに、class="aka"を、呼ばれる度に追加と削除を繰り返します。

結果