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 astyle
propriedade que permite definir os vários estilos do elemento. - Em seguida, defina os valores das propriedades do
style
objeto.
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 cssText
propriedade:
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 style
objeto à style
propriedade 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 )