批量更新多个元素的Javascript中的CSS值？

Posted 2023-02-21

【中文标题】批量更新多个元素的Javascript中的CSS值？

【英文标题】：Updating CSS Values in Javascript across multiple elements in batch?

【发布时间】：2021-01-31 08:23:27

【问题描述】：

我正在开发一个网络应用程序，它需要跨多个元素频繁更新 CSS 值。我正在尝试减少回流，并想知道是否有办法批量完成此操作？这是一个例子：

for(let j = 0; j<defholdids.length; j++) 
    $('#'+defholdids[j]).css(
      'z-index':'4',
      'color':'rgba(0,0,0,0.7)',
    );

defholdids 是一个存储了元素 ID 的数组。循环遍历并更新 css 值。据我了解，每次更新元素 css 值时都会触发重排。有没有办法更新所有元素的 CSS 值，然后“重排”而不是每次迭代都触发“重排”？

我正在与 Electron 合作创建一个桌面应用程序，不确定这是否会有所作为。

【参考方案1】：

如何为需要 cssupdates 的元素分配一个类名并立即更新它们。例如

   $('.class-name-goes-here').css(
      'z-index':'4',
      'color':'rgba(0,0,0,0.7)',
    );

【讨论】：

这会覆盖/防止通过 ID 对单个元素的 css 进行更改吗？示例：我需要能够更新 $('#'+defholdid[1]).css('color','value') 而无需更新课程。然后稍后将其更改回来（通过我显示的代码）。 ID CSS 值不会覆盖类值重置吗？

【参考方案2】：

通过引入（第二个）类然后在适当的元素上添加/切换/删除该类，而不是直接操作元素的.css()，几乎总是会更好。

在约瑟夫的回答中，他介绍了 .class-name-goes-here（我将其缩写为 .main-class 如果您引入第二个/附加类：

.aux-class 
  z-index:4;
  color: rgba(0,0,0,0.7);

你可以做$('.main-class').addClass('aux-class'); 这会将更改一次性应用到所有 .main-class 元素。

您可以稍后通过 $('.main-class').removeClass('aux-class'); 将其改回

如果您有众所周知且维护良好的状态，您可以使用.toggleClass() 而不是单独的添加和删除。

这不会阻止您对$(element).css() 进行进一步的操作，但必须“手动”恢复这些更改。我可能会介绍另一个不同的（第三个？第四个？）类。

为它所代表的状态（或对象）命名类也很好。 这些名称取决于事物是什么以及您对它们做什么。也许.main-class和.aux-class的好名字可以是.toggleable和.active，所以可能

<section>
  <div class="toggleable">
    ...some content...
  </div>

  <div class="something-else">
    ...some other content...
  </div>

  <div class="toggleable">
    ...even more content...
  </div>

  <div>
    ...no particular class on this div...
  </div>
</section>

然后，按下按钮（例如）你会这样做$('.toggleable').addClass('active')

【讨论】：

感谢您的建议。如果我知道我的元素只有两种状态（z-index 99 的白色或 z-index 4 的黑色）将“更改”类应用于元素/删除元素是否可以满足我的需要？我可以将它专门应用于“选定”元素，然后将其从所有元素中删除？尝试删除未绑定到元素的类可以吗？基本上我有一个按钮需要清除所有，但允许用户选择单个元素。

另外，如果我理解错了，请纠正我，但我在某处读到，将 CSS 更改应用于 DOM 树上可能的最低元素可以节省重排时间，这不与此相反吗？

如果你知道只有两种状态，那一种是default还是initial状态？我不会有额外的课程，然后在用户选择东西时有一个“选定的”课程。假设我们正在谈论“卡片”，初始未选中状态是 white/z-index=99 — 你将拥有所有这些 <div class="card"> 并且 .card ... 的 CSS 将应用白色和 99，然后当用户选择您将添加$(clickedElement).addClass('selected') ...您可以为清除按钮添加$('.card').removeClass('selected')。 .removeClass 当一个类不在一个元素上时，如果可以的话；不是错误。

不是每个 CSS 更改都会导致重排；颜色没有。 z-index 可能（我不记得了），但是通过这种方法，您仍然将 z-index 应用于可能的最低元素，因为 .card 是 您想要更改的东西堆叠顺序。您不希望将 z-index 应用于卡片内的某些元素。

这就是我需要知道的！