使用window.resize（）动态更改css

Question

如果您已经设置了一些规则，是否有任何变体可以使用window.resize()更改块宽度？

让我们说我有一个宽度有一块的块，用JQuery获得这个宽度：

var $block_1_width = $(".block_1").width();

我需要让另一个块具有与第一个相同的宽度。所以，我写道：

var $block_2 = $(".block_2");

$block_2.css("width", $block_1_width + "px");

如果我加载页面，它将正常工作，但我希望它们在用户调整页面大小时在任何窗口宽度动态保持相同的大小。所以，我试试：

$(window).resize(function() {
  $block_2.css("width", $block_1_width + "px");
});

它并没有。我知道当我写$block_2.css("width", $block_1_width + "px")时，JQuery将内联样式设置为$block_2。这是否意味着我无法用window.resize()覆盖它？

Answer 1

您需要在调整大小后重新计算$block_1_width，如下所示：

$(window).resize(function() {
    var $block_1_width = $(".block_1").width();
    $block_2.css("width", $block_1_width + "px");
});