How to update multiple CSS properties using JavaScript in one operation

Question

Let's say I have the following CSS rule in a stylesheet:

.demo-rule {
  --custom-prop-1: 12px;
  --custom-prop-2: 54px;
  width: 100%;
  height: 100%;
  /* several more properties are set here */
}

Now, that rule is applied to multiple HTML elements and I want to recalculate and reassign the values of the two custom CSS properties --custom-prop-1 and --custom-prop-2 using JavaScript. Currently, I'm first obtaining the style of the corresponding rule in the stylesheet as follows:

const style = this.shadowRoot.styleSheets[0].rules[0].style;

Once I got that I calculate and set the values of those properties:

const valueProp1 = /* calculation */;
const valueProp2 = /* calculation */;
style.setProperty("--custom-prop-1", valueProp1);
style.setProperty("--custom-prop-2", valueProp2);

The problem I see is that I edit the style twice. This might force the web browser's rendering engine to recalculcate the layout twice. I would like to change both properties in one atomic operation to prevent that. Is that possible somehow?

dave · Accepted Answer · 2021-07-28 16:31:21Z

1

This might force the web browser's rendering engine to recalculcate the layout twice.

It won't. The browser will wait for the JS to finish, it can't rerender until the JS reaches a "stopping point", for example below, we wait half a second to do anything (just to let the initial div render), then change it to a blue background, then have a busy loop that should take a while, then make it green. You will never see the blue div.

setTimeout(() => {
  const test = document.getElementById('test');
  test.style.background='blue';
  for (let i = 0; i < 10000000; i++) {
    test.style.background='green';
  }
}, 500);

#test {
width: 10px;
height: 10px;
background: red;
}

<div id="test"></div>

answered Jul 28, 2021 at 16:31

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ackh Over a year ago

That's a good test that validates your statement. That would mean that there is no necessity to change CSS properties in an atomic way in the first place. It's not a direct answer to my question but prevents my problem from occurring entirely. Hence, I'm accepting it as answer.

Pytth · Accepted Answer · 2021-07-28 16:26:09Z

1

Since both those props have their own individual values, you would need to update them separately. The only way I could think for you to NOT have to do that, is for them to be declared in a style tag on the page that you edit at the same time via javascript before placing them back on the page. That all said, I think you might be worrying a bit too much about optimizing this. I would be highly surprised if you ran into performance issues by changing those values as you did above.

answered Jul 28, 2021 at 16:26

Pytth

4,1961 gold badge28 silver badges32 bronze badges

1 Comment

ackh Over a year ago

I'm writing a bunch of web components and using setProperty to change CSS properties is a recurring pattern. It's less about worrying about optimization and more about understanding the APIs that are involved and their implications.

Collectives™ on Stack Overflow

How to update multiple CSS properties using JavaScript in one operation

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related