（jQueryの学習）CSS：高さを操作する／heightメソッド／要素の高さを取得する（その２）

引き続き、要素の高さを取得／設定する方法を学びます。

次は「複数要素」の高さを取得します。

1-2.heightメソッド【返却値(数値) = 要素.height( )】で複数要素の高さを取得する（できるか？）

1-1.では1つの要素の高さを取得しましたが、
複数の要素の高さは取得できないのか？を試してみます。

以下、サンプルの通り、
「テストエリア１」と「テストエリア２」を要素としてheightメソッドを実行したところ、
文字列を返却するcssメソッドと同様に、1つ目の「テストエリア１」の高さのみ取得できました。

heightメソッドは複数要素には対応していないことがわかります。
以下のサンプルを動かしてみると、
CSSで定義した通りの値（例：テストエリア１なら「40」）が返却されることがわかります。

サンプルソース

// HTML

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.height()
    //   サンプル：「テストエリア１と２」の高さを取得する
    alert("[" + $(".box-css-test-area-1, .box-css-test-area-2").height() + "]");
  });
});

実装例

指定した要素に設定されている高さを取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

前回と同じ方法では、
複数の要素の高さは取得できないことがわかりました。
次回は違う方法で考えます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share