CSS e JS trabalham juntos para adicionar muitos efeitos exclusivos às nossas páginas. Para obter algum efeito especial, precisamos usar Javascript para alterar dinamicamente as propriedades CSS de uma determinada tag.
Por exemplo: quando o mouse passa sobre uma imagem, adicionamos uma borda à imagem. O código pode ser o seguinte: Qual deve ser o atributo após o estilo em JavaScript?
<script type="texto/javascript">
função imagemOver(e) {
e.style.border="1px vermelho sólido";
}
função imagemOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
Tabela de comparação de atributos de estilo CSS JavaScript
rótulo de caixa e comparação de atributos
Sintaxe CSS (não diferencia maiúsculas de minúsculas) Sintaxe JavaScript (diferencia maiúsculas de minúsculas)
fronteira
borda inferior borderBottom
borda-cor inferior borderBottomColor
estilo borda inferior borderBottomStyle
largura da borda inferior borderBottomWidth
cor da borda borderColor
borda esquerda borda esquerda
borda-cor esquerda borderLeftColor
estilo de borda esquerda borderLeftStyle
borda-largura esquerda borderLeftWidth
border-right borderRight
borda-cor direita borderRightColor
estilo border-right borderRightStyle
borda com largura direita borderRightWidth
estilo de borda borderStyle
borda superior borderTop
border-top-color borderTopColor
estilo border-top borderTopStyle
largura superior da borda borderTopWidth
largura da borda borderWidth
claro claro
float floatStyle
margem margem
margem inferior marginBottom
margem esquerda margem esquerda
margem direita marginRight
margem superior marginTop
preenchimento
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
Rótulo de cor e fundo e comparação de atributos
Sintaxe CSS (não diferencia maiúsculas de minúsculas) Sintaxe JavaScript (diferencia maiúsculas de minúsculas)
fundo de fundo
anexo de fundo backgroundAttachment
cor de fundo backgroundColor
imagem de fundo backgroundImage
posição de fundo backgroundPosition
repetição de fundo backgroundRepeat
cor cor
Tags de estilo e comparação de atributos
Sintaxe CSS (não diferencia maiúsculas de minúsculas) Sintaxe JavaScript (diferencia maiúsculas de minúsculas)
exibição
tipo de estilo de lista listStyleType
imagem de estilo de lista listStyleImage
posição de estilo de lista listStylePosition
estilo de lista listStyle
espaço em branco espaço em branco
Rótulo de estilo de texto e comparação de atributos
Sintaxe CSS (não diferencia maiúsculas de minúsculas) Sintaxe JavaScript (diferencia maiúsculas de minúsculas)
fonte fonte
font-family fontFamily
tamanho da fonte fontSize
estilo de fonte fontStyle
variante de fonte fontVariant
peso da fonte fontWeight
Rótulo de texto e comparação de atributos
Sintaxe CSS (não diferencia maiúsculas de minúsculas) Sintaxe JavaScript (diferencia maiúsculas de minúsculas)
espaçamento entre letras letterSpacing
quebra de linha lineBreak
altura da linha lineHeight
alinhamento de texto textAlign
decoração de texto textDecoration
recuo de texto textIndent
justificar texto textJustificar
transformação de texto textTransform
alinhamento vertical verticalAlign