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

Question

我有一个正在开发的网络应用程序，它需要经常更新跨多个元素的 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 合作创建一个桌面应用程序，不确定这是否有所作为。

Answer 1

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

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

Answer 2

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

在约瑟夫的回答中，他介绍了.class-name-goes-here （我将其.main-class为.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');把它改回来$('.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')