批量更新跨多個元素的 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')