Haverá momentos em que você precisará manipular os estilos de um elemento HTML dentro do seu arquivo JavaScript. Um exemplo disso seria quando você precisa esconder ou mostrar um menu quando um usuário clica em um botão. Nesta lição, você aprenderá como manipular estilos usando as propriedades Element.style e Element.classList. A propriedade Element.style é uma propriedade somente leitura que representa o estilo inline de um elemento. Você pode usar esta propriedade para obter ou definir o estilo de um elemento. Aqui está um exemplo de um elemento de parágrafo com um ID para:

<p id="para">This is a paragraph</p>

Você pode usar a propriedade style para alterar a cor do elemento parágrafo para vermelho:

<p id="para">This is a paragraph</p>
<script src="index.js"></script>

const paraEl = document.getElementById("para");
paraEl.style.color = "red";

A propriedade style pode ser usada para definir muitas propriedades CSS, como color, background-color, font-size, font-weight e assim por diante. Outra forma de manipular estilos é usando a propriedade Element.classList. A propriedade classList é uma propriedade somente leitura que pode ser usada para adicionar, remover ou alternar classes em um elemento. Vamos dar uma olhada em alguns exemplos. Neste exemplo, você vai adicionar uma classe chamada highlight a um elemento de parágrafo com um ID de para. No CSS, vamos definir a classe highlight para alterar a cor de fundo do elemento de parágrafo para amarelo. No JavaScript, vamos adicionar a classe highlight ao elemento de parágrafo usando o método classList.add().

<link rel="stylesheet" href="styles.css" />
<p id="para">This is a paragraph</p>
<script src="index.js"></script>

.highlight {
  background-color: yellow;
}

const paraEl = document.getElementById("para");
paraEl.classList.add("highlight");

Você também pode adicionar múltiplas classes a um elemento passando-as como argumentos para o método classList.add():

classList.add("class1", "class2", "class3");

Se você precisar remover uma classe de um elemento, pode usar o método classList.remove() assim:

classList.remove("highlight");

Para alternar uma classe em um elemento, você pode usar o método classList.toggle(). In this example, we have a button element with an ID of toggle-btn and a nav element with an ID of menu. Inside the CSS, we have added some styles for the menu and a class called show that will change the display property of the .menu to block. Dentro do JavaScript, estamos acessando o elemento menu e o elemento button usando o método getElementById(). Então, estamos adicionando um listener de evento ao elemento button que irá alternar a classe show no elemento .menu quando o botão for clicado:

<link rel="stylesheet" href="styles.css" />
<button id="toggle-btn">Toggle Menu</button>

<nav id="menu" class="menu">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
  </ul>
</nav>
<script src="index.js"></script>

.menu {
  display: none;
  background-color: lightgray;
  width: 50%;
  padding: 10px;
}

.menu.show {
  display: block;
}

const menu = document.getElementById("menu");
const toggleBtn = document.getElementById("toggle-btn");

toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));

Quando um usuário clicar no botão, a classe show será adicionada ao elemento .menu e o menu será exibido. Se o usuário clicar no botão novamente, a classe show será removida do elemento .menu e o menu será ocultado. Ao usar métodos e propriedades como style, add(), remove() e toggle(), você pode manipular facilmente os estilos de um elemento com JavaScript, criando páginas web dinâmicas e interativas.