本日は「3.CSSプロパティを設定する」を学びます。
まずは「単一要素」に「単一プロパティ」を設定します。
3.CSSプロパティを設定する
3-1.cssメソッド【要素.css(プロパティ名, 値)】でプロパティ値を設定する
次にCSSのプロパティを変更します。手始めに「内側の円」の幅を変えてみます。
値は「"50px"」のようにも指定できるし、「50」と数値型で指定することもできます。
また、算術複合代入子（+=、-=）を使用した相対的な指定も可能になっています。
注意点として、HTMLファイルに埋め込まれたCSSの変更はできない。
外部ファイルとして読み込まれたCSSファイル内の変更のみ可能となっています。
サンプルソース
// HTML
<input type="button" value="「内側の円」の幅を10px大きくする">
<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(プロパティ名, 値)
$(".circle").css("width", "+=10");
});
});
実装例
指定した要素に設定されているプロパティ値を変更します。
【テキスト１】 【テキスト２】
次回は複数の要素に対して、
同じプロパティをまとめて設定する方法を学びます。
それでは、また。
