Objeto Style do HTML DOM

Objeto Style

O objeto Style representa uma declaração de estilo isolada.

Propriedade do objeto Style

Propriedade Descrição
alignContent Definir ou retornar o alinhamento entre as linhas dentro do contêiner flexível, quando os itens não utilizam todo o espaço disponível.
alignItems Definir ou retornar o alinhamento do item dentro do contêiner flexível.
alignSelf Definir ou retornar o alinhamento do item selecionado no contêiner flexível.
animation A propriedade abreviada de todos os atributos de animação, exceto animationPlayState.
animationDelay Definir ou retornar quando a animação deve começar.
animationDirection Definir ou retornar se a animação deve ser reproduzida ao contrário em um ciclo alternado.
animationDuration Definir ou retornar o número de segundos ou milissegundos necessários para completar um ciclo da animação.
animationFillMode Definir ou retornar o valor aplicado além do tempo de execução da animação.
animationIterationCount Definir ou retornar o número de vezes que a animação deve ser reproduzida.
animationName Definir ou retornar o nome da animação @keyframes.
animationPlayState Definir ou retornar se a animação está em execução ou pausada.
animationTimingFunction Definir ou retornar a curva de velocidade da animação.
background Definir ou retornar todas as propriedades de fundo em uma única declaração.
backgroundAttachment Definir ou retornar se a imagem de fundo é fixa ou rola com a página.
backgroundClip Definir ou retornar a área de desenho do fundo.
backgroundColor Definir ou retornar a cor de fundo do elemento.
backgroundImage Definir ou retornar a imagem de fundo do elemento.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Definir ou retornar a área de localização da imagem de fundo.
backgroundPosition Definir ou retornar a posição inicial da imagem de fundo.
backgroundRepeat Definir ou retornar como a imagem de fundo deve ser repetida (tile).
backgroundSize Definir ou retornar o tamanho da imagem de fundo.
backfaceVisibility Definir ou retornar se o elemento deve ser visível quando não voltado para a tela.
borderBottom Definir ou retornar todas as propriedades borderBottom em uma única declaração.
borderBottomColor Definir ou retornar a cor da borda inferior.
borderBottomLeftRadius Definir ou retornar a forma da borda no canto inferior esquerdo.
borderBottomRightRadius Definir ou retornar a forma da borda no canto inferior direito.
borderBottomStyle Definir ou retornar o estilo da borda inferior.
borderBottomWidth Definir ou retornar a largura da borda inferior.
borderCollapse Definir ou retornar se a borda da tabela deve ser dobrada em uma única borda.
borderColor Definir ou retornar a cor da borda do elemento (até quatro valores podem ser definidos).
borderImage Atributo abreviado para definir ou retornar todas as propriedades borderImage.
borderImageOutset Definir ou retornar a quantidade de área da imagem da borda que ultrapassa o box da borda.
borderImageRepeat Definir ou retornar se a imagem da borda deve ser repetida, envolvida ou esticada.
borderImageSlice Definir ou retornar a quantidade de deslocamento interno da borda da imagem.
borderImageSource Definir ou retornar a imagem usada como borda.
borderImageWidth Definir ou retornar a largura da borda da imagem.
borderLeft Definir ou retornar todas as propriedades borderLeft em uma única declaração.
borderLeftColor Definir ou retornar a cor da borda esquerda.
borderLeftStyle Definir ou retornar o estilo da borda esquerda.
borderLeftWidth Definir ou retornar a largura da borda esquerda.
borderRadius Atributo abreviado para definir ou retornar todas as propriedades borderRadius dos quatro lados.
borderRight Definir ou retornar todas as propriedades borderRight em uma única declaração.
borderRightColor Definir ou retornar a cor da borda direita.
borderRightStyle borderRightStyle
borderRightStyle definir ou retornar o estilo da borda direita.
borderRightWidth definir ou retornar a largura da borda direita.
borderSpacing definir ou retornar o espaço entre as células da tabela.
borderStyle definir ou retornar o estilo da borda do elemento (até quatro valores podem ser definidos).
borderTop definir ou retornar todas as propriedades borderTop em uma declaração.
borderTopColor definir ou retornar a cor da borda superior.
borderTopLeftRadius definir ou retornar a forma da borda superior esquerda.
borderTopRightRadius definir ou retornar o estilo da borda superior.
borderTopWidth definir ou retornar a largura da borda superior.
borderWidth definir ou retornar a largura da borda do elemento (até quatro valores podem ser definidos).
bottom definir ou retornar a posição inferior do elemento alinhado.
boxDecorationBreak definir ou retornar o comportamento do fundo e da borda do elemento durante a paginação, ou para elementos inline, o comportamento durante a quebra de linha.
boxShadow adicionar uma ou mais sombras a uma caixa (box).
boxSizing permite que você defina alguns elementos para se adequar a uma área de alguma forma.
captionSide definir ou retornar a posição do título da tabela.
caretColor definir ou retornar a cor do cursor de inserção.
clear definir ou retornar a posição do elemento em relação ao objeto flutuante.
clip definir ou retornar qual parte do elemento de alinhamento está visível.
color definir ou retornar a cor do texto.
columnCount definir ou retornar o número de colunas que o elemento deve ser dividido.
columnFill definir ou retornar como preencher as colunas.
columnGap definir ou retornar o espaçamento entre as colunas.
columnRule propriedade abreviada para definir ou retornar todas as propriedades columnRule.
columnRuleColor definir ou retornar a cor da regra entre as colunas.
columnRuleStyle definir ou retornar o estilo da regra entre as colunas.
columnRuleWidth definir ou retornar a largura da regra entre as colunas.
columns propriedade abreviada para definir ou retornar columnWidth e columnCount.
columnSpan definir ou retornar quantas colunas o elemento deve span.
columnWidth definir ou retornar a largura da coluna.
content Used with :before and :after pseudo-elements to insert generated content.
counterIncrement Increment one or more counters.
counterReset Create or reset one or more counters.
cursor Set or return the cursor type displayed by the mouse pointer.
direction Set or return the text direction.
display Set or return the display type of the element.
emptyCells Set or return whether to display the border and background of empty cells.
filter Set or return the image filter (visual effects such as blur and saturation).
flex Set or return the length of the item, relative to the rest of the part.
flexBasis Set or return the initial length of the elastic item.
flexDirection Set or return the direction of the elastic item.
flexFlow Abbreviated properties of flexDirection and flexWrap.
flexGrow Set or return the growth amount of the item relative to other items.
flexShrink Set or return the shrinkage method of the item relative to other items.
flexWrap Set or return whether the elastic item should wrap.
cssFloat Set or return the horizontal alignment method of the element.
font Set or return font properties in a single declaration.
fontFamily Set or return the font family of the text.
fontSize Set or return the font size of the text.
fontStyle Set or return whether the font style is normal, italic, or oblique.
fontVariant Set or return whether the font should be displayed in small capitals.
fontWeight Set or return the weight of the font.
fontSizeAdjust Maintain the readability of the text when font fallback occurs.
fontStretch Select the stretch deformation method from the character set when font fallback occurs.
hangingPunctuation Specify whether punctuation marks can be placed outside the line box.
height Set or return the height of the element.
hyphens Set how to split words to improve the layout of the paragraph.
icon Enable the author to use iconic equivalents to set the style of the element.
imageOrientation Specify the right or clockwise rotation applied to the image by the user agent.
isolation Define whether the element must create new stacking content.
justifyContent Set or return the alignment method between items within an elastic container when the item does not use all available space.
left Define or return the left position of the positioning element.
letterSpacing Define ou retorna o espaço entre os caracteres no texto.
lineHeight Define ou retorna o espaço entre as linhas de texto.
listStyle Define ou retorna o estilo da lista em uma declaração.
listStyleImage Define ou retorna a imagem como marcador da lista.
listStylePosition Define ou retorna a posição do marcador da lista.
listStyleType Define ou retorna o tipo de marcador da lista.
margin Define ou retorna a margem do elemento (pode ser configurado até quatro valores).
marginBottom Define ou retorna a margem inferior externa do elemento.
marginLeft Define ou retorna a margem esquerda externa do elemento.
marginRight Define ou retorna a margem direita externa do elemento.
marginTop Define ou retorna a margem superior externa do elemento.
maxHeight Define ou retorna a altura máxima do elemento.
maxWidth Define ou retorna a largura máxima do elemento.
minHeight Define ou retorna a altura mínima do elemento.
minWidth Define ou retorna a largura mínima do elemento.
navDown Define ou retorna a posição de navegação ao usar a tecla de seta para baixo.
navIndex Define ou retorna a ordem de navegação do elemento.
navLeft Define ou retorna a posição de navegação ao usar a tecla de seta para esquerda.
navRight Define ou retorna a posição de navegação ao usar a tecla de seta para direita.
navUp Define ou retorna a posição de navegação ao usar a tecla de seta para cima.
objectFit Especifica como o conteúdo do elemento substituído deve se ajustar ao retângulo definido pelas dimensões de altura e largura usadas.
objectPosition Especifica o alinhamento do elemento substituído dentro de sua caixa.
opacity Define ou retorna o nível de opacidade do elemento.
order Define ou retorna a ordem do item flexível em relação aos outros itens.
orphans Define ou retorna o número mínimo de linhas que devem permanecer na parte inferior da página quando a paginação ocorre dentro do elemento.
outline Define ou retorna todos os atributos de outline em uma declaração.
outlineColor Define ou retorna a cor do contorno ao redor do elemento.
outlineOffset Desloca o contorno e o desenha para fora da margem da borda.
outlineStyle Define ou retorna o estilo do contorno ao redor do elemento.
outlineWidth Define ou retorna a largura da contorno ao redor do elemento.
overflow Define ou retorna como o conteúdo que se exibe fora da caixa do elemento deve ser tratado.
overflowX Determina como lidar com a margem esquerda/direita do conteúdo, se ele transborda a área de conteúdo do elemento.
overflowY Especificar como lidar com os limites superior/inferior do conteúdo, se ele transbordar a área de conteúdo do elemento.
padding Definir ou retornar a margem interna do elemento (até quatro valores podem ser definidos).
paddingBottom Definir ou retornar a margem inferior interna do elemento.
paddingLeft Definir ou retornar a margem esquerda interna do elemento.
paddingRight Definir ou retornar a margem direita interna do elemento.
paddingTop Definir ou retornar a margem superior interna do elemento.
pageBreakAfter Definir ou retornar o comportamento de paginação após o elemento.
pageBreakBefore Definir ou retornar o comportamento de paginação antes do elemento.
pageBreakInside Definir ou retornar o comportamento de paginação dentro do elemento.
perspective Definir ou retornar como a visão do elemento 3D deve ser vista.
perspectiveOrigin Definir ou retornar a posição inferior do elemento 3D.
position Definir ou retornar o tipo de método de posicionamento do elemento (estático, relativo, absoluto ou fixo).
quotes Definir ou retornar o tipo de aspas das citações incorporadas.
resize Definir ou retornar se o elemento pode ser ajustado pelo usuário.
right Definir ou retornar a posição da margem direita do elemento de posicionamento.
scrollBehavior Determinar se há efeito de animação de posicionamento suave quando o usuário clicar em um link dentro da caixa de rolagem, em vez de saltar diretamente.
tableLayout Definir ou retornar o modo de layout das células, linhas e colunas da tabela.
tabSize Definir ou retornar o comprimento do tabulador.
textAlign Definir ou retornar o modo de alinhamento horizontal do texto.
textAlignLast Quando text-align for "justify", definir ou retornar como a última linha do bloco ou a linha antes da quebra forçada deve ser alinhada.
textDecoration Definir ou retornar a decoração do texto.
textDecorationColor Definir ou retornar a cor da decoração do texto.
textDecorationLine Definir ou retornar o tipo da linha na decoração do texto.
textDecorationStyle Definir ou retornar o estilo da linha na decoração do texto.
textIndent Definir ou retornar o recuo do primeiro linha do texto.
textJustify Definir ou retornar o método de alinhamento usado quando text-align é "justify".
textOverflow Definir ou retornar o que deve ocorrer quando o texto transborda o elemento contido.
textShadow Definir ou retornar o efeito de sombra do texto.
textTransform Definir ou retornar o tamanho da fonte do texto.
top Definir ou retornar a posição superior do elemento alinhado.
transform Aplicar transformações 2D ou 3D ao elemento.
transformOrigin Definir ou retornar a posição do elemento transformado.
transformStyle Definir ou retornar como os elementos aninhados devem ser renderizados no espaço 3D.
transition Usado para definir ou retornar uma abreviação de quatro propriedades de transformação.
transitionProperty Definir ou retornar as propriedades CSS do efeito de transição.
transitionDuration Definir ou retornar o número de segundos ou milissegundos necessários para completar o efeito de transição.
transitionTimingFunction Definir ou retornar a curva de velocidade do efeito de transição.
transitionDelay Definir ou retornar quando deve começar o efeito de transição.
unicodeBidi Definir ou retornar se o texto deve ser coberto para suportar vários idiomas no mesmo documento.
userSelect Definir ou retornar se o texto do elemento pode ser selecionado.
verticalAlign Definir ou retornar o alinhamento vertical do conteúdo do elemento.
visibility Definir ou retornar se o elemento deve ser visível.
whiteSpace Definir ou retornar como o tabulação, quebra de linha e espaços em branco no texto devem ser tratados.
width Definir ou retornar a largura do elemento.
wordBreak Definir ou retornar as regras de quebra de linha para scripts não CJK.
wordSpacing Definir ou retornar o espaçamento entre as palavras no texto.
wordWrap Permitir que palavras longas e não interrompíveis sejam quebradas e quebradas na próxima linha.
widows Definir ou retornar o número mínimo de linhas visíveis necessárias para um elemento que deve estar visível na parte superior da página.
zIndex Definir ou retornar a ordem de pilha do elemento alinhado.

Acessar objeto Style

Pode-se acessar o objeto Style tanto da parte head do documento quanto de um elemento HTML específico.

Exemplo 1

Acessar o objeto estilo da parte head do documento:

var x = document.getElementsByTagName("STYLE");

Experimente você mesmo

Exemplo 2

Acessar o objeto estilo de um elemento especifico:

var x = document.getElementById("myH1").style;

Experimente você mesmo

Criar objeto Style

Exemplo 1

Você pode usar o método document.createElement() para criar um elemento <style>:

var x = document.createElement("STYLE");

Experimente você mesmo

Exemplo 2

Você também pode definir os atributos de estilo de elementos existentes:

document.getElementById("myH1").style.color = "red";

Experimente você mesmo

Páginas relacionadas

Tutorial HTML：HTML CSS

Tutorial CSS：Tutorial CSS

Manual de Referência HTML：Tag <style> do HTML

Manual de Referência CSS：Atributos CSS