2-2.cssメソッド【返却値(objectオブジェクト) = 要素.css(配列[プロパティ, プロパティ, ...])】で複数要素のプロパティ値を取得する
2-1.ではcssメソッドは単一のプロパティしか取得できませんでしたが、果たしてcssメソッドは複数のプロパティをまとめて取得できないのでしょうか？
・・・答えはNoです。
cssメソッドには別の呼び出し方法も定義されており、
プロパティは配列により複数の名称を渡すことも可能になっています。
このように複数のプロパティを渡すことで、それぞれのプロパティ値の取得が可能です。
ただし、返却値は「文字列」ではなく「objectオブジェクト」であることに注意が必要。
サンプルソース
// 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(){
/* サンプル：「内側の円」の幅と高さを取得する */
// 【構文】返却値(objectオブジェクト) = 要素.css(配列[プロパティ, プロパティ, ...])
var obj = $(".circle").css(["width", "height"]);
// 返却されたオブジェクトを配列に変換
var obj_arr = [];
for (var key in obj) {
pl_v_arr.push(obj[key]);
}
// 結果出力
alert("[" + obj_arr.join(", ") + "]");
// ※特定のプロパティを取得する場合は、わざわざ配列にしなくても↓のようにしても良い
alert("[" + obj.width + "]");
});
});
実装例
指定した要素に設定されているプロパティを取得します。
要素:
プロパティ:
※Windowsでは「Ctrlキー」or「Shiftキー」を押しながら選択することで複数選択が可能
要素:
プロパティ:
※Windowsでは「Ctrlキー」or「Shiftキー」を押しながら選択することで複数選択が可能
【テキスト１】 【テキスト２】
このように引数を配列で渡すことで、
objectオブジェクトの状態で複数のCSSプロパティが取得できました。
次回は「3.CSSプロパティを設定する」を学びます。
それでは、また。
