使用 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");
});