2016年1月8日金曜日

(jQueryの学習)CSS:プロパティを操作する/cssメソッド/プロパティを設定する(その2)

引き続き、CSSのプロパティを設定する方法を学びます。

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】

次回は単一の要素に対して、
複数のプロパティをまとめて設定する方法を学びます。

それでは、また。

Previous Post
Next Post

post written by: