jQuery利用例：幅と高さの取得・制御

サンプルはこちら。
http://jsdo.it/goto_jp/vUtb

jQueryで幅と高さの取得と制御は実に分かりやすく簡単です。

JavaScript

$(".box").width();
$(".box").height();

width() と height() で対象の値を参照できます。

サンプルでは下記のようにボタンのクリック時にアラート表示させています。

$(function(){
    //boxの幅を表示
    $(".viewWidth").click(function(){  //「.viewWidth」をクリックしたら
        alert($(".box").width());  //「.box」のwidthをアラート表示
    });

    //boxの高さを表示
    $(".viewHeight").click(function(){  //「.viewHeight」をクリックしたら
        alert($(".box").height());  //「.box」のheightをアラート表示
    });
 });

width() と height() に引数を入れることで幅を変更することができます。

$(".box").width(100);

この場合はクラス「box」に style 属性で直接 width:100px が埋め込まれます。

サンプルでは下記のようにフィールドの値を box に反映させるようにしています。

$(function(){
    //boxの幅を変更
    $("#widthSubmit").click(function(){  //「#widthSubmit」をクリックしたら
        $(".box").width($("#num").val());  //「#num」の値を「.box」のwidthへ入れる
    });
});