web-dev-qa-db-fra.com

Changer la largeur de div en direct avec jQuery

Est-il possible de changer la largeur d'une div avec jQuery? Et si c'est le cas, comment?

Ce que je veux, c'est changer sa largeur en temps réel en fonction de la largeur de la fenêtre du navigateur. Ainsi, si/lorsque l'utilisateur modifie la fenêtre du navigateur, les dimensions de div sont également modifiées en temps réel.

jquerycsswidth
15
Alex

Vous pouvez utiliser, ce qui sera déclenché lorsque la fenêtre sera redimensionnée.

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

Si vous voulez une largeur DIV en pourcentage de l'écran, utilisez simplement CSS width : 80%;.

21
Niels

Il est en effet possible de changer la largeur d'une div éléments dans jQuery:

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

Cependant, ce que vous décrivez peut être mieux et plus efficacement réalisé en CSS en définissant une largeur en pourcentage:

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

Cette div sera alors toujours égale à 75% de la largeur de l'écran, sauf si la largeur de l'écran signifie que la div sera inférieure à 300 pixels ou supérieure à 960 pixels.

16
Rory McCrossan

Il y a deux façons de faire ça:

CSS: Utilisez width en tant que%, comme 75%, afin que la largeur du div change automatiquement lorsque l'utilisateur redimensionne le navigateur.

Javascipt: Utiliser l'événement resize

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

J'espère que ceci vous aidera :)

1
Deviprasad Das

Vous avez une meilleure solution:

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

Vous ne pouvez pas simplement utiliser un pourcentage de largeur pour la div? Définir la largeur sur 50% la rendra 50% plus large que la fenêtre (en supposant qu’il n’y ait pas d’élément parent auquel une largeur est attribuée).

0
Nate B