以下、3つのカテゴリに分けて見ていきます。
- CSSプロパティを取得する
- 複数のCSSプロパティを取得する
- CSSプロパティを設定する
本日は「1.CSSプロパティを取得する」を学びます。
1.CSSプロパティを取得する
1-1.cssメソッド【返却値(文字列) = 要素.css(プロパティ)】で1つの要素のプロパティ値を取得する
プロパティの値を取得するためにはcssメソッドを利用します。要素に対してcssメソッドを使用し、その引数に取得したいプロパティを指定します。
返却値は「文字列」のため、取得したプロパティ値を二次利用するには値の加工が必要。
例）
幅の値は「要素.css("width")」で取得できますが、
「"999px"（文字列）」の形式で返却されるため、
『"px"を取り除いた後、parseIntをかける』等の細工が必要になります。
これをするくらいなら、初めから要素の幅を取得する「widthメソッド」を使った方が楽。
サンプルソース
// HTML
<input type="button" value="ボタンを押すと、指定した要素とそのプロパティが表示されます"><br>
<div class="box-test-area">
<div class="circle"></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(){
// 【構文】返却値(文字列) = 要素.css(プロパティ)
// サンプル：「内側の円」の幅を取得する
alert("[" + $(".circle").css("width") + "]");
});
});
実装例
指定した要素に設定されているプロパティを取得します。
要素: プロパティ:
要素: プロパティ:
【テキスト１】 【テキスト２】
いかがでしたか？
まずは1つの要素に対するCSSプロパティが取得できました。
次回は「2.複数のCSSプロパティを取得する」を学びます。
それでは、また。
