Muitas propriedades de estilo CSS possuem hífens em seus nomes, que são interpretados como sinais de menos em JavaScript.
Portanto, os nomes das propriedades dos objetos CSS2Properties são um pouco diferentes dos nomes reais das propriedades CSS.
Se um nome de propriedade CSS contiver um ou mais hifens, os hifens precisarão ser removidos em JS e as letras originais imediatamente após os hifens serão alteradas para maiúsculas.
Deve-se observar que float é uma palavra-chave em JS, portanto, em JS float é escrito como cssFloat ou floatStyle.
A seguir está uma tabela de comparação entre propriedades CSS e codificação CSS em JavaScript:
Etiqueta da caixa e comparação de atributos:
Código
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(ou seja) cssFloat(FF)
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:
Código
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
Tag de estilo e comparação de atributos:
Código
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:
Código
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:
Código
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