web-dev-qa-db-ja.com

jQueryでライブでdivの幅を変更する

JQueryでdivの幅をライブで変更することは可能ですか？もしそうなら、どうやって？

私が欲しいのは、ブラウザのウィンドウ幅に応じてリアルタイムで幅を変更することです。したがって、ユーザーがブラウザウィンドウを変更すると、divの寸法もリアルタイムで変更されます。

jquerycsswidth
15
Alex

使用できます。これは、ウィンドウのサイズが変更されたときにトリガーされます。

$( window ).bind("resize", function(){
    // Change the width of the div
    $("#yourdiv").width( 600 );
});

DIVの幅を画面のパーセンテージで表示するには、CSS width : 80%;。

23
Niels

JQueryでdiv要素の幅を変更することは確かに可能です。

$("#div").css("width", "300px");

ただし、幅をパーセントで設定することで、CSSで記述している内容をより良く、より効果的に達成できます。

#div {
    width: 75%;
    /* You can also specify min/max widths */
    min-width: 300px;
    max-width: 960px;
}

このdivは、画面の幅がdivが300pxより小さい、または960pxより大きいことを意味しない限り、常に画面の幅の75％になります。

16
Rory McCrossan

これを行うには2つの方法があります。

CSS： 75％のように幅を％として使用します。ユーザーがブラウザーのサイズを変更すると、divの幅が自動的に変更されます。

Javascipt： Useresizeイベント

$(window).bind('resize', function()
{
    if($(window).width() > 500)
        $('#divID').css('width', '300px');
    else
        $('divID').css('width', '200px');
});

これがあなたを助けることを願っています：）

1
Deviprasad Das

より良い解決策を得た：

$('#element').resizable({
    stop: function( event, ui ) {
        $('#element').height(ui.originalSize.height);
    }
});
0
calmburst

divに幅のパーセンテージを使用することはできませんか？幅を50％に設定すると、ウィンドウの幅が50％になります（幅が割り当てられた親要素がないと仮定します）。

0
Nate B