窗口Resize时Slider-Wrapper尺寸未更新问题求助（JS实现）

问题出在你只在Resize事件里更新了变量，但没有把新的变量值重新应用到DOM元素的样式上——变量变化不会自动同步到页面样式，必须手动调用css()方法更新。

最简单的解决方式是把设置样式的逻辑抽成一个独立函数，页面初始化和窗口Resize时都调用它：

// 声明变量
var slideWidth = window.innerWidth;
var sliderWidth = slides * slideWidth;
var sliderHeight = window.innerHeight;

// 封装设置尺寸的函数
function updateSliderDimensions() {
  $('.slide').css({ 'width': slideWidth });
  $('.slider').css({ 'width': sliderWidth });
  $('.slider-wrapper').css({ 
    'width': slideWidth,
    'height': sliderHeight
  });
}

// 页面加载时初始化尺寸
$(document).ready(function() {
  updateSliderDimensions();
});

// 窗口Resize时更新变量并同步样式
window.addEventListener("resize", function() {
  console.log("resized");
  slideWidth = window.innerWidth;
  sliderHeight = window.innerHeight;
  sliderWidth = slides * slideWidth;
  // 调用函数更新样式
  updateSliderDimensions();
});

关键改动说明： #

• 把原本写在ready里的样式设置代码抽成updateSliderDimensions函数，避免重复代码
• Resize事件更新变量后，必须调用这个函数，才能让新的尺寸值作用到DOM元素上
• 合并了slider-wrapper的width和height设置，让代码更简洁

内容的提问来源于stack exchange，提问作者Noel