2回目は「複数要素」に「単一プロパティ」を一律設定します。
3-2.複数の要素に対して、まとめてプロパティ値を設定する
先ほどは1つの要素(内側の円)に対してのみプロパティ値を設定しましたが、次は複数の要素に対して、まとめて同じプロパティ値を設定します。
特に難しい話ではありません。
要素の部分を複数要素を参照するようにすれば良いだけです。
例として、
「テキスト1」と「テキスト2」の『fontタグ』のサイズを変更します。
サンプルソース
// HTML
<input type="button" value="「テキスト」のサイズを大きくする">
<div class="box-test-area">
<font class="css1-char1">【テキスト1】</font> <font class="css1-char2">【テキスト2】</font><br>
</div>
// CSS
/* テキスト1 */
.css1-char1 {font-size: 20px; font-weight: bold; color: green;}
/* テキスト2 */
.css1-char2 {font-size: 80%; color: red; font-style: italic;}
// jQuery
$(function() {
$("input[type=button]").click(function(){
/* サンプル:「テキスト」のサイズを1px大きくする */
// 【構文】返却値(objectオブジェクト) = 要素.css(プロパティ名, 値)
$("font").css("font-size", "+=1");
});
});
実装例
指定した要素に設定されているプロパティ値を変更します。
【テキスト1】 【テキスト2】
次回は単一の要素に対して、
複数のプロパティをまとめて設定する方法を学びます。
それでは、また。