If you're new to web development, you may have heard of CSS, or Cascading Style Sheets. CSS is a language used to describe how HTML elements should be displayed on a web page. It allows you to change the look and feel of a web page, including the layout, colors, fonts, and more.

While CSS is typically used to define the styles for a web page, you can also manipulate CSS styles using JavaScript and the Document Object Model (DOM). In this post, we'll take a closer look at how you can manipulate CSS styles using the DOM in JavaScript.

To start, let's revisit the number guessing game from our previous post. In this game, the player tries to guess a random number between 1 and 20. If the player guesses correctly, we want to change the background color of the web page to green to indicate that they won.

Here's the code we used to change the body:

if (guess === secretNumber) {
  document.querySelector('body').style.backgroundColor = '#60b347';
}

Let's break down what's happening in this code. First, we're using an if statement to check if the player's guess is equal to the secret number. If the guess is correct, we then use document.querySelector() to select the body element of the web page. We then access the style property of the body element, which allows us to set its CSS styles. Finally, we set the backgroundColor style to a shade of green using the HEX color code #60b347.

It's important to note that when accessing CSS styles using JavaScript, you need to use camel case instead of hyphenated style names. For example, background-color becomes backgroundColor.

Let's take a look at some other ways we can manipulate CSS styles using the DOM.

Changing Styles for Multiple Elements

In our previous example, we changed the background color of the entire web page. But what if we wanted to change the styles of multiple elements at once? We can use the querySelectorAll() method to select multiple elements and change their styles.

Here's an example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

const listItems = document.querySelectorAll('li');
listItems.forEach(item => {
  item.style.fontWeight = 'bold';
});

In this example, we're selecting all the li elements in an unordered list using document.querySelectorAll(). We then use the forEach() method to loop through each li element and set its fontWeight style to bold. This will make the text of each list item appear bold.

Changing Styles on Event

In addition to changing CSS styles based on certain conditions, we can also change styles in response to user events, such as clicking a button or hovering over an element. We can use event listeners in JavaScript to detect these events and update CSS styles accordingly.

Here's an example:

<button id="myButton">Click me!</button>

const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
  button.style.backgroundColor = 'red';
});

In this example, we're selecting a button element using document.querySelector(). We then add an event listener to the button using addEventListener(), which listens for a click event. When the button is clicked, the event listener function is called, which changes the button