4回目の最後は「複数要素」に「複数プロパティ」を一律設定します。
3-4.複数の要素に対して、複数のプロパティ値をまとめて設定する
最後に、これまでのやり方を応用した方法を考えます。3-2.で複数の要素への設定方法は「複数の要素を対象とする範囲を指定するだけ」と学び、
3-3.で複数のプロパティ値への設定方法は「設定したプロパティ名と値のセットをオブジェクトに格納する」と学びました。
これらを利用して、複数の要素に対して、複数のプロパティをまとめて設定します。
例として、複数の「テキスト」のサイズと文字色を変更します。
サンプルソース
// HTML
<input type="button" value="「テキスト」のサイズを大きくし、文字色を青にする"><br>
<div class="box-test-area">
<font class="css1-char1">【テキスト１】</font> <font class="css1-char2">【テキスト２】</font><br>
</div>
// CSS
/* テキスト１ */
.css1-char1 {font-size: 20px; font-weight: bold; color: green;}
/* テキスト２ */
.css1-char2 {font-size: 80%; color: red; font-style: italic;}
// jQuery
$(function() {
$("input[type=button]").click(function(){
/* サンプル：「テキスト」のサイズを大きくし、文字色を赤にする */
// 【構文】返却値(objectオブジェクト) = 要素.css(objectオブジェクト )
testObj = {};
testObj["font-size"] = "+=1"; // testObj.fontsizeでは認識しなかったため、左記の方法で実装
testObj["color"] = "red";
$("font").css(testObj);
});
});
実装例
指定した要素に設定されているプロパティ値を変更します。
【テキスト１】 【テキスト２】
いかがでしたか？
cssメソッドを利用したCSSプロパティの操作方法が分かったと思います。
それでは、また。
