在特定事件中更新变量答案

【问题标题】：Updating a variable within a certain event在特定事件中更新变量
【发布时间】：2022-07-27 22:17:50
【问题描述】：

我的目标是在调整屏幕大小后更新元素的 offsetWidth。我有以下代码，它收集元素的宽度：

const trendingNewsSlide = document.getElementById("trending-news-container"); // This is the parent or the container of slides
var trendingNews = trendingNewsSlide.querySelectorAll(".trending_news"); // This is my element 
var trendingNewsWidth = trendingNews[0].offsetWidth; // This is the one to be updated

我正在制作一个可拖动的滑块，它需要我从父级的offsetLeft 中减去元素的宽度：

trendingNewsSlide.style.left = `${trendingNewsSlide.offsetLeft - trendingNewsWidth}px`;

但因为我希望它具有响应性，所以我使用vw 单位作为元素的宽度，因此元素宽度不可避免地会根据用户的屏幕尺寸而有所不同。

然后我尝试使用下面的代码，我认为这会改变变量：

window.onresize = () => {
  trendingNewsWidth = trendingNews[0].offsetWidth;
}

但似乎什么也没发生。我曾想过在调整窗口大小时重新加载页面，但这很烦人，而且是一种非常糟糕的解决问题的方法。

你们中有人知道怎么做吗？这是我的full code

【问题讨论】：

你是如何使用trendingNewsWidth的？您必须运行受此影响的代码
变量不会在 JS 中通过引用更新。跟踪对象并更改其属性，而不是原始值。另外，请分享您的 HTML。
很多人做这种事情，认为这是动态调整元素大小的唯一方法，但实际上CSS提供了很多动态调整元素大小的方法。这很可能是XY problem，但由于缺乏信息，很难说。
另外，如果您只想使用querySelectorAll 返回的第一个元素，请使用querySelector...

标签： javascript

【解决方案1】：

您的代码确实更新了变量。我通过调整窗口大小对其进行了测试。

如果您尝试在调整大小时在控制台记录变量，您可以看到变量的值发生了变化。

但如果另一个变量的值依赖于这个变量，您将不得不在调整大小时再次手动更改该变量的值。

var trendingNews = document.querySelectorAll(".trending_news")
var trendingNewsWidth = trendingNews[0].offsetWidth

window.onresize = () => {
   trendingNewsWidth = trendingNews[0].offsetWidth
   console.log(trendingNewsWidth)
}

【讨论】：