使用jQuery更改div宽度

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

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

Answer 1

您可以使用，当窗口resize时将触发。

 $( 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：使用resize事件

 $(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); } });