JavaScript获取窗口宽度后无法使用windowWidth变量问题求助

嘿，我来帮你捋捋为啥用不了windowWidth变量～ 大概率是下面这几个常见问题导致的：

最可能的原因：你没调用getWidth()函数 #

你只定义了计算宽度的函数，但从来没执行它啊！windowWidth初始值是空字符串，只有调用getWidth()后，它才会被赋值。比如你得在代码里主动加一句getWidth();，或者在合适的时机（比如页面加载、窗口大小变化时）触发它。

次要可能：jQuery没正确引入 #

你的代码依赖$、$(window)这些jQuery语法，如果页面里没先加载jQuery库，浏览器会直接报错$ is not defined，函数根本执行不了，windowWidth自然还是空的。

执行时机不对 #

如果你的代码在<body>元素加载完成前就运行了，$("body").css("font-size")会获取不到有效数值（甚至返回undefined），除法运算会出错，windowWidth可能变成NaN或者保持初始值。这种情况要确保代码在DOM加载完成后再执行。

修正后的示例代码 #

// 务必先在页面中加载jQuery！
var windowWidth = ''; 

function getWidth() {
  // 先判断字体大小是否有效，避免报错
  var bodyFontSize = parseFloat($("body").css("font-size"));
  if (!isNaN(bodyFontSize)) {
    windowWidth = $(window).width() / bodyFontSize;
  } else {
    console.error("无法获取body的字体大小，请检查DOM是否加载完成");
  }
}

// 页面加载完成后执行一次
$(document).ready(function() {
  getWidth();
  // 在这里测试变量是否正常
  console.log("初始窗口宽度（rem单位）：", windowWidth);
});

// 如果需要窗口大小变化时自动更新，加上这段
$(window).resize(function() {
  getWidth();
  console.log("更新后的窗口宽度（rem单位）：", windowWidth);
});

你可以打开浏览器开发者工具（F12）查看控制台，有没有报错信息，这能帮你更快定位问题～

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