Question

Javascript中是否可以同时设置不同元素的样式，以便只触发一次重排？例如，是否可以像下面的代码片段一样设置不同元素的颜色样式，只需触发一次回流而不是三次回流？

document.getElementById("elem1").style.color = '#000';
document.getElementById("elem2").style.color = '#fff';
document.getElementById("elem3").style.color = '#abc';

我熟悉最小化回流/重绘的技术（如here所述），例如使用文档片段或使用css类而不是通过javascript操作css样式，但我不知道如何应用它们在这种情况下。

编辑：示例中的三个元素是兄弟姐妹，但它们之间可能存在或不存在其他兄弟元素，这意味着我们不能假设它们是由html中的那个顺序定义的结构体。例如，我们可能有这样的结构：

<div id="parent">
    <div id="elem1">elem1</div>
    <div id="elem2">elem2</div>
    <div id="elem4">elem4</div>
    <div id="elem3">elem3</div>
</div>

非常感谢任何帮助！

干杯

Answer 1

你可以准备这样的课程：

.color1{
color : #000;
} 

.color2{
color : #abc;
}

并设置为这样的元素：

document.getElementById("elem1").className = document.getElementById("elem1").className + " color1";
document.getElementById("elem2").className = document.getElementById("elem2").className + " color2";

Answer 2

取决于您的元素结构。例如，假设这些元素是兄弟DIV，您可以将CSS定义为：

div.myclass {
    color:#000
}

div.myclass + div {
    color:#fff
}

div.myclass + div + div {
    color:#abc
}

然后是一个JS命令：

document.getElementById("elem1").className = "myclass";

将为所有3种设置颜色：http://jsfiddle.net/PjZ77/1/

Answer 3

如果在您的情况下有意义，请使用css类并交换容器类。

HTML结构可能是：

  <div id="container1">
    <div id="elem1" class="clsA">A</div>
    <div id="elem2" class="clsB">B</div>
    <div id="elem3" class="clsC">C</div>
  </div>

并在CSS中：

  #container1 .clsA { color: #000; }
  #container1 .clsB { color: #111; }
  #container1 .clsC { color: #222; }

  #container1.mystate .clsA { color: #DDD; }
  #container1.mystate .clsB { color: #EEE; }
  #container1.mystate .clsC { color: #FFF; }

您可以使用document.getElementById("container1").className类（或空类，或者您在css中定义的任何类名称）设置mystate。

只对一个元素（容器）进行类更改，因此elem（n）子项将在同一时刻刷新。

Answer 4

据我所知，无法一次设置多个元素的类。但是，浏览器实际上可能会为您批量更改这些更改。如果您不读取样式以及编写它们，我相信这应该成立。

本文提供了有关如何触发重排和重绘的一些见解http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

对不同元素风格的变化进行分组

4 个答案: