Question

是否可以使用jQuery更改div的宽度？如果是，怎么样？

我想要的是根据浏览器的窗口宽度实时更改其宽度，因此，如果/当用户更改浏览器窗口时，div的尺寸也会实时更改。

Answer 1

您可以使用，当窗口调整大小时会触发。

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

如果您希望DIV宽度占屏幕的百分比，请使用CSS width : 80%;。

Answer 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小于300px或大于960px。

Answer 3

有两种方法可以做到这一点：

CSS：使用宽度为％，如75％，因此当用户调整浏览器大小时，div的宽度会自动更改。

Javascipt：使用调整大小事件

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

希望这能帮助你：）

Answer 4

您不能只使用div的百分比宽度吗？将宽度设置为50％将使其宽度为窗口的50％（假设没有为其指定宽度的父元素）。

Answer 5

得到更好的解决方案：

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

用jQuery改变div宽度

5 个答案: