Como adicionar estilos a um elemento

Resumo : neste tutorial, você aprenderá como adicionar estilos a um elemento usando métodos JavaScript DOM.

Suponha que você tenha um <div>elemento como segue:

<div class="note">JavaScript CSS</div>Linguagem de código:  HTML, XML  ( xml )

E você deseja adicionar estilos a este elemento. Usando os métodos JavaScript DOM, você pode adicionar estilos embutidos ou estilos globais ao elemento.

Estilos embutidos

Para adicionar estilos embutidos a um elemento, siga estas etapas:

• Primeiro, selecione o elemento usando métodos DOM, como document.querySelector(). O elemento selecionado possui a stylepropriedade que permite definir os vários estilos do elemento.
• Em seguida, defina os valores das propriedades do styleobjeto.

O código a seguir altera a cor de fundo e a cor do <div>elemento acima:

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';Linguagem de código:  JavaScript  ( javascript )

1) Usando a propriedade cssText

Adicionar estilo individual é bastante detalhado. Felizmente, você pode adicionar vários estilos de uma só vez usando a cssTextpropriedade:

note.style.cssText += 'color:red;background-color:yellow';Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, usamos o +=operador para acrescentar novos estilos aos existentes. Se você usar o =operador, o estilo existente será removido, assim:

note.style.cssText = 'color:red;background-color:yellow';Linguagem de código:  JavaScript  ( javascript )

2) Usando uma função auxiliar

A função auxiliar a seguir aceita um elemento e um objeto de estilo. Ele adiciona todos os estilos do styleobjeto à stylepropriedade de element:

function css(element, style) {
    for (const property in style)
        element.style[property] = style[property];
}Linguagem de código:  JavaScript  ( javascript )

E você pode usar esta css()função auxiliar para definir os estilos do <div>elemento da seguinte maneira:

const note = document.querySelector('.note');
css(note, {
    'background-color': 'yellow',
    color: 'red'
});Linguagem de código:  JavaScript  ( javascript )

Estilos Globais

Para adicionar estilos globais a um elemento, você cria o elemento de estilo, preenche-o com as regras CSS e anexa o elemento de estilo à árvore DOM, assim:

const style = document.createElement('style');
style.innerHTML = `
      .note {
        background-color: yellow;
        color:red;
      }
    `;
document.head.appendChild(style);Linguagem de código:  JavaScript  ( javascript )

Anterior

Verifique se existe um atributo

Próximo

Obtenha estilos de um elemento