Estilo JavaScript

Resumo : neste tutorial, você aprenderá como usar a propriedade style para manipular o estilo inline dos elementos HTML.

Configurando estilos embutidos

Para definir o estilo embutido de um elemento, você usa a stylepropriedade desse elemento:

element.styleLinguagem de código:  CSS  ( css )

A stylepropriedade retorna o objeto somente leitura CSSStyleDeclarationque contém uma lista de propriedades CSS. Por exemplo, para definir a cor de um elemento como red, use o seguinte código:

element.style.color = 'red';Linguagem de código:  JavaScript  ( javascript )

Se a propriedade CSS contém hífens ( -), por exemplo, -webkit-text-strokevocê pode usar a notação semelhante a um array ( []) para acessar a propriedade:

element.style.['-webkit-text-stock'] = 'unset';Linguagem de código:  JavaScript  ( javascript )

A tabela a seguir mostra as propriedades CSS comuns:

CSS	JavaScript
fundo	fundo
anexo de fundo	plano de fundoAnexo
cor de fundo	cor de fundo
imagem de fundo	imagem de fundo
posição de fundo	posição de fundo
fundo de repetição	fundo de repetição
fronteira	fronteira
borda inferior	borda inferior
cor da borda inferior	bordaBottomColor
estilo borda inferior	borderBottomStyle
largura da borda inferior	borderBottomWidth
Cor da borda	Cor da borda
fronteira esquerda	borda esquerda
cor da borda esquerda	bordaLeftColor
estilo borda esquerda	borderLeftStyle
largura da borda esquerda	bordaLeftWidth
fronteira direita	fronteiraDireita
cor da borda direita	borderRightColor
estilo borda direita	borderRightStyle
largura da borda à direita	borderRightWidth
estilo de borda	estilo de borda
borda superior	bordaTop
cor da borda superior	borderTopColor
estilo de borda superior	borderTopStyle
largura da borda superior	borderTopWidth
largura da borda	largura da borda
claro	claro
grampo	grampo
cor	cor
cursor	cursor
mostrar	mostrar
filtro	filtro
flutuador	cssFloat
Fonte	Fonte
família de fontes	família de fontes
tamanho da fonte	tamanho da fonte
variante de fonte	fonteVariant
espessura da fonte	espessura da fonte
altura	altura
esquerda	esquerda
espaçamento entre letras	espaçamento entre letras
altura da linha	altura da linha
estilo de lista	estilo de lista
imagem de estilo de lista	listStyleImage
posição de estilo de lista	listStylePosition
tipo de estilo de lista	listStyleType
margem	margem
margem inferior	margemInferior
margem esquerda	margem esquerda
margem direita	margemDireita
margem superior	margemTop
transbordar	transbordar
preenchimento	preenchimento
fundo de preenchimento	preenchimentoInferior
preenchimento à esquerda	preenchimentoEsquerda
preenchimento à direita	preenchimento à direita
topo acolchoado	preenchimentoTopo
quebra de página depois	pageBreakDepois
quebra de página antes	pageBreakBefore
posição	posição
acidente vascular cerebral-dasharray	acidente vascular cerebralDasharray
traço-dashoffset	acidente vascular cerebralDashoffset
largura do traçado	largura do traçado
alinhamento de texto	alinhamento de texto
decoração de texto	textoDecoração
recuo de texto	textoIndent
transformação de texto	textoTransformar
principal	principal
alinhamento vertical	verticalAlign
visibilidade	visibilidade
largura	largura
índice z	zIndex

Para substituir completamente o estilo embutido existente, defina a cssTextpropriedade do styleobjeto. Por exemplo:

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

Ou você pode usar o setAttribute()método:

element.setAttribute('style','color:red;background-color:yellow');Linguagem de código:  JavaScript  ( javascript )

Depois de definir o estilo embutido, você pode modificar uma ou mais propriedades CSS:

element.style.color = 'blue';Linguagem de código:  JavaScript  ( javascript )

Se não quiser substituir completamente as propriedades CSS existentes, você pode concatenar a nova propriedade CSS da cssTextseguinte forma:

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

Nesse caso, o += operador anexa a nova sequência de estilo à existente.

A seguinte css()função auxiliar é usada para definir vários estilos para um elemento de um objeto de pares chave-valor:

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

Você pode usar esta css()função para definir vários estilos para um elemento com o id #contentda seguinte forma:

let content = document.querySelector('#content');
css(content, { background: 'yellow', border: 'solid 1px red'});Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir usa o styleobjeto para definir as propriedades CSS de um parágrafo com o id content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Style Demo</title>
</head>
<body>
    <p id="content">JavaScript Setting Style Demo!</p>
    <script>
        let p = document.querySelector('#content');
        p.style.color = 'red';
        p.style.fontWeight = 'bold';
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Como funciona:

• Primeiro, selecione o elemento do parágrafo cujo id está contentusando o querySelector()método.
• Em seguida, defina as propriedades de cor e espessura da fonte do parágrafo definindo as propriedades colore fontWeightdo styleobjeto.

Obtendo estilos embutidos

A stylepropriedade retorna os estilos embutidos de um elemento. Na prática não é muito útil porque a stylepropriedade não retorna as regras que vêm de outro lugar, por exemplo, estilos de uma folha de estilos externa.

Para aplicar todos os estilos a um elemento, você deve usar o window.getComputedStyle()método.

Resumo

• Use as propriedades do element.styleobjeto para definir as propriedades CSS embutidas para o elemento HTML.