const - JS | lectureDOM & Events Fundamentals

Manipulating CSS Styles

DOM & Events Fundamentals

The DOM also includes CSS styles, and so with DOM manipulation, you can also change styles. We will change the background color of our application to green if the user wins the game (guess the secret number) and make the secret number background wider.

script.js
...
else if (guess === secretNumber) {
  document.querySelector('.message').textContent = '🎉 Correct Number!';
  document.querySelector('body').style.backgroundColor = '#10B981';
  /**
   * You can also use: document.body.style.backgroundColor = '#10B981';
  */
  document.querySelector('.number').style.width = '30rem';
}
...

On saving, everything works as expected. What you need to know is that these styles are actually set as inline styles. Meaning we are not changing the CSS files; instead, the styles are directly applied using the style attribute, as you can see below.

Manipulating CSS Styles