Modificando Estilos de Elementos com JavaScript

No desenvolvimento web, frequentemente é necessário modificar dinamicamente os estilos dos elementos. O JavaScript oferece duas maneiras principais de alterar a aparência dos elementos: atualização de estilos inline utilizando a propriedade style e gerenciamento de classes com classList.

Alteração de Estilos Inline Utilizando a Propriedade style

A propriedade style em JavaScript permite modificar diretamente o CSS inline de um elemento HTML. Este método proporciona controle total sobre propriedades CSS individuais, mas é limitado a estilos inline e afeta apenas o elemento específico.

É possível modificar propriedades CSS individuais utilizando notação de ponto no objeto style de um elemento. Os nomes das propriedades devem ser escritos em camelCase (por exemplo, backgroundColor em vez de background-color).

index.html

index.css

index.js

A propriedade style é utilizada para modificar os estilos inline do elemento #box. Cada propriedade CSS é acessada como uma propriedade individual em JavaScript (por exemplo, box.style.backgroundColor), permitindo alterar dinamicamente aspectos específicos do estilo do elemento.

Adição e Remoção de Classes CSS com classList

A propriedade classList oferece uma forma mais flexível e poderosa de gerenciar os estilos de um elemento, permitindo adicionar, remover ou alternar classes CSS. Esse método é mais sustentável do que modificar estilos inline diretamente, pois possibilita o uso de arquivos CSS externos e mantém a separação entre a estilização e a lógica JavaScript.

index.html

index.css

index.js

classList.toggle() é utilizado para adicionar ou remover a classe highlight quando o botão é clicado. Este método evita o acúmulo de estilos no atributo style inline e depende de regras CSS pré-definidas para facilitar a manutenção.

Exemplo prático: alternância de temas

Exemplo prático em que o usuário pode alternar entre um tema claro e escuro utilizando classList.

index.html

index.css

index.js

classList.replace() é utilizado para alternar as classes light-theme e dark-theme com base no estado atual.

1. Qual propriedade é utilizada para modificar estilos inline de um elemento?

2. Como alterar a cor de fundo de um `<div>` com o ID `box` para coral usando JavaScript?

3. O que o seguinte código faz?

Qual propriedade é utilizada para modificar estilos inline de um elemento?

Select the correct answer

style

classList

getComputedStyle()

Como alterar a cor de fundo de um <div> com o ID box para coral usando JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

O que o seguinte código faz?

Select the correct answer

Adiciona a classe active se ela não existir; remove se já existir.

Define a classe active como estilo inline no botão.

Apenas adiciona a classe active sem removê-la.

Altera a cor de fundo para active.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 12

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me an example of how to use the style property in JavaScript?

How do I use classList to switch between themes?

What are the advantages of using classList over inline styles?

Awesome!

Completion rate improved to 2.22

Modificando Estilos de Elementos com JavaScript

Deslize para mostrar o menu

Alteração de Estilos Inline Utilizando a Propriedade style

index.html

index.css

index.js

Adição e Remoção de Classes CSS com classList

index.html

index.css

index.js

Exemplo prático: alternância de temas

Exemplo prático em que o usuário pode alternar entre um tema claro e escuro utilizando classList.

index.html

index.css

index.js

classList.replace() é utilizado para alternar as classes light-theme e dark-theme com base no estado atual.

1. Qual propriedade é utilizada para modificar estilos inline de um elemento?

2. Como alterar a cor de fundo de um `<div>` com o ID `box` para coral usando JavaScript?

3. O que o seguinte código faz?

Qual propriedade é utilizada para modificar estilos inline de um elemento?

Select the correct answer

style

classList

getComputedStyle()

Como alterar a cor de fundo de um <div> com o ID box para coral usando JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

O que o seguinte código faz?

Select the correct answer

Adiciona a classe active se ela não existir; remove se já existir.

Define a classe active como estilo inline no botão.

Apenas adiciona a classe active sem removê-la.

Altera a cor de fundo para active.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 12

Modificando Estilos de Elementos com JavaScript

Alteração de Estilos Inline Utilizando a Propriedade style

Adição e Remoção de Classes CSS com classList

Exemplo prático: alternância de temas

1. Qual propriedade é utilizada para modificar estilos inline de um elemento?

2. Como alterar a cor de fundo de um <div> com o ID box para coral usando JavaScript?

3. O que o seguinte código faz?

Awesome!

Modificando Estilos de Elementos com JavaScript

Alteração de Estilos Inline Utilizando a Propriedade style

Adição e Remoção de Classes CSS com classList

Exemplo prático: alternância de temas

1. Qual propriedade é utilizada para modificar estilos inline de um elemento?

2. Como alterar a cor de fundo de um <div> com o ID box para coral usando JavaScript?

3. O que o seguinte código faz?

2. Como alterar a cor de fundo de um `<div>` com o ID `box` para coral usando JavaScript?

2. Como alterar a cor de fundo de um `<div>` com o ID `box` para coral usando JavaScript?