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】
次回は単一の要素に対して、
複数のプロパティをまとめて設定する方法を学びます。
それでは、また。