CSS e JS trabalham juntos para adicionar muitos efeitos exclusivos às nossas páginas. Também há casos relacionados em 52CSS.com. 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="01.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript Estilo CSS tabela de comparação de atributos
rótulo de caixa e comparação de atributos
Sintaxe CSS (sem distinção entre maiúsculas e minúsculas) JavaScript sintaxe (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
tags e atributos de cor e plano de fundo comparados à
sintaxe CSS (sem distinção entre maiúsculas e minúsculas) Sintaxe JavaScript (sensível a maiúsculas e 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 e atributos de estilo são comparados à
sintaxe CSS (sem distinção entre maiúsculas e 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
tags e atributos de estilo de texto
de espaço em branco
são comparados àsintaxe CSS (sem distinção entre maiúsculas e 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
font-weight fontWeight
tags de texto e atributos comparados à
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