（jQueryの学習）CSS：プロパティを操作する／cssメソッド／プロパティを設定する（その３）

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

3回目は「単一要素」に「複数プロパティ」を一律設定します。

3-3.1つの要素に対して、複数のプロパティ値をまとめて設定する

次に複数のプロパティ値をまとめて設定します。

これまでは「プロパティ名」と「プロパティ値」をcssメソッドに渡すだけでしましたが、
今度は「プロパティ名」と「プロパティ値」のセットをオブジェクトにして渡すことで実現できます。

例として、「内側の円」のサイズを変更します。

サンプルソース

// HTML
<input type="button" value="「内側の円」のサイズを大きくする">
<div class="box-test-area">
  <div class="circle"><div class="circle-char"></div></div></div>
</div>

// CSS
/* 内側の円 */
.circle {width:70px; height:70px; text-align: center; background-color:#FFCC99; opacity: 0.8; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    /* サンプル：「内側の円」のサイズを10px大きくする */
    // 【構文】返却値(objectオブジェクト) = 要素.css(objectオブジェクト )
    circleObj = {};
    circleObj.width = "+=10";
    circleObj.height = "+=10";
    $(".circle").css(circleObj);
  });
});

実装例

指定した要素に設定されているプロパティ値を変更します。

【テキスト１】　【テキスト２】

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

それでは、また。

• Tweet
• Share
• Share
• Share
• Share