批量更新 Javascript 中多个元素的 CSS 值?
Updating CSS Values in Javascript across multiple elements in batch?
我有一个正在开发的 Web 应用程序,需要经常更新多个元素的 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 值然后 'reflow' 而不是每次迭代都触发 'reflow'?
我正在使用 Electron 创建一个桌面应用程序,不确定这是否会有所不同。
如何为需要 cssupdates 的元素分配一个 class 名称并立即更新它们。例如
$('.class-name-goes-here').css({
'z-index':'4',
'color':'rgba(0,0,0,0.7)',
});
通过在适当的元素上引入(第二个)class 然后 adding/toggling/removing 几乎总是更好 class,而不是直接操纵 .css()
个元素。
在约瑟夫的回答中,他介绍了 .class-name-goes-here
(我将其缩短为 .main-class
如果你引入一个second/additional 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');
将其改回
如果您有 well-known 和 well-maintained 状态,您可以使用 .toggleClass()
而不是单独的添加和删除。
这不会阻止您对 $(element).css()
进行进一步的操作,但这些更改必须“手动”还原。我可能会介绍 另一个 不同的(第三个?第四个?)class。
为它所代表的状态(或对象)命名 class 也很好。
这些名称取决于事物是什么以及您用它们做什么。也许 .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')
我有一个正在开发的 Web 应用程序,需要经常更新多个元素的 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 值然后 'reflow' 而不是每次迭代都触发 'reflow'?
我正在使用 Electron 创建一个桌面应用程序,不确定这是否会有所不同。
如何为需要 cssupdates 的元素分配一个 class 名称并立即更新它们。例如
$('.class-name-goes-here').css({
'z-index':'4',
'color':'rgba(0,0,0,0.7)',
});
通过在适当的元素上引入(第二个)class 然后 adding/toggling/removing 几乎总是更好 class,而不是直接操纵 .css()
个元素。
在约瑟夫的回答中,他介绍了 .class-name-goes-here
(我将其缩短为 .main-class
如果你引入一个second/additional 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');
如果您有 well-known 和 well-maintained 状态,您可以使用 .toggleClass()
而不是单独的添加和删除。
这不会阻止您对 $(element).css()
进行进一步的操作,但这些更改必须“手动”还原。我可能会介绍 另一个 不同的(第三个?第四个?)class。
为它所代表的状态(或对象)命名 class 也很好。
这些名称取决于事物是什么以及您用它们做什么。也许 .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')