how to be sure that the visualization is updated with css changes via javascript?

Question

example..

<input type="button" value="click me" id="p1">

<script>
 document.querySelector("#p1").onclick = function () {
    this.style.backgroundColor = "green";
    alert(`My background color is ${this.style.backgroundColor} ??`);
  }
</script>

The alert write My background color is green but at the moment of alert the color is gray!!

I know many ways to get around this:

don't use alert but show a div..
use setTimeout
use sleep function with async await (What is the JavaScript version of sleep()?)

..but is a way to be sure that the browser rendering is done?

A Haworth · Accepted Answer · 2022-05-20 04:51:20Z

1

You could use requestAnimationFrame - similar to setTimeout except the browser will take care of the timing as the function is run before a repaint.

A simple example:

function tellMe() {
  alert(`My background color is ${document.querySelector('#p1').style.backgroundColor} ??`);
}
document.querySelector("#p1").onclick = function() {
  this.style.backgroundColor = "green";
  requestAnimationFrame(function() {
    requestAnimationFrame(tellMe)
  });
}

<input type="button" value="click me" id="p1">

answered May 20, 2022 at 4:51

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

how to be sure that the visualization is updated with css changes via javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related