wake-up-neo.com

Ändern Sie die Div-Breite live mit jQuery

Ist es möglich, die Breite eines div mit jQuery live zu ändern? Und wenn ja, wie?

Was ich möchte, ist, seine Breite in Abhängigkeit von der Fensterbreite des Browsers in Echtzeit zu ändern. Wenn also der Benutzer das Browserfenster ändert, werden auch die Abmessungen von div in Echtzeit geändert.

jquerycsswidth
15
Alex

Sie können verwenden, was ausgelöst wird, wenn die Fenstergröße geändert wird.

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

Wenn Sie eine DIV-Breite als Prozentsatz des Bildschirms wünschen, verwenden Sie einfach CSS width : 80%;.

21
Niels

Es ist in der Tat möglich, die Breite eines div-Elements in jQuery zu ändern:

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

Was Sie jedoch beschreiben, kann in CSS besser und effektiver erreicht werden, indem Sie die Breite als Prozentsatz festlegen:

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

Dieses div ist dann immer 75% der Bildschirmbreite, es sei denn, die Bildschirmbreite bedeutet, dass das div kleiner als 300px oder größer als 960px ist.

16
Rory McCrossan

Es gibt zwei Möglichkeiten, dies zu tun:

CSS: Verwenden Sie width als% (beispielsweise 75%), sodass sich die Breite des div automatisch ändert, wenn Sie die Größe des Browsers ändern.

Javascipt: Verwenden Sie resize event

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

Hoffe das hilft dir :)

1
Deviprasad Das

Bessere Lösung:

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

Sie können nicht einfach eine prozentuale Breite für die div verwenden? Wenn Sie die Breite auf 50% setzen, wird das Fenster 50% so breit wie das Fenster (vorausgesetzt, es ist kein übergeordnetes Element mit einer Breite zugewiesen).

0
Nate B