Изменение ширины div в реальном времени с помощью jQuery

Можно ли изменить ширину div в прямой трансляции с помощью jQuery? И если это так, как?

Я хочу изменить свою ширину в зависимости от ширины окна браузера в реальном времени, поэтому, если/когда пользователь меняет окно браузера, размеры div также изменяются в реальном времени.

Ответ 1

Вы можете использовать, который будет срабатывать при изменении размера окна.

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

Если вам нужна ширина DIV в процентах от экрана, просто используйте CSS width : 80%;.

Ответ 2

В jQuery действительно возможно изменить ширину элементов div:

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

Однако то, что вы описываете, может быть лучше и более эффективно достигнуто в CSS, установив ширину в процентах:

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

Этот div всегда будет на 75% шириной экрана, если ширина экрана не означает, что div будет меньше 300 пикселей или больше 960 пикселей.

Ответ 3

Вы не можете просто использовать процентную ширину для div? Установка ширины до 50% сделает ее на 50% шириной, чем окно (при условии, что нет родительского элемента с назначенной ему шириной).

Ответ 4

Есть два способа сделать это:

CSS: Используйте ширину как%, например 75%, поэтому ширина div автоматически изменится при изменении размера браузера.

Javascipt: Использовать событие изменения размера

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

Надеюсь, это поможет вам :)

Ответ 5

Получите лучшее решение:

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