Página Inicial>Tutorial de web design>Tutorial CSS

Tabela de comparação de propriedades de estilo CSS JavaScript

Autor：Eve Cole Data da Última Atualização：2009-06-12 17:47:10

Para obter algum efeito especial, precisamos usar Javascript para alterar dinamicamente o atributo 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:

Código JavaScript
  1. <script type= "text/javascript" >.
  2.      function imageOver(e) {
  3. e.style.border= "1px vermelho sólido "
  4. }
    5. ;
  5.      function imageOut(e) {
  6. e.style.borderWidth=0
  7. }
  8. </script>
  9. <img src= "phplamp.gif" onmouseover= "imageOver(this)" onmouseout= "imageOut(this)" />

atrás do estilo em JavaScript Quais devem ser as propriedades de?

Tabela de comparação de atributos de estilo CSS JavaScript
de estilo esquerdo -borda borda esquerda preenchimento inferiorPreenchimento inferior- direitoPreenchimento direito superiorTop de
rótulo de caixa e comparação de atributos
Sintaxe CSS (sem distinção entre maiúsculas e minúsculas) Sintaxe JavaScript (diferencia maiúsculas de minúsculas)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border -borda de corBorda de cor
-borda esquerdaBorda esquerda
-borda de cor esquerdaLeftColor
borda-borda de estilo esquerdoBorda
de largura esquerdaLeftWidth
borda-direitaBorda
direita-borda de cor direitaRightColor
borda-borda de estilo direitoRightStyle
borda-borda de largura direitaRightWidth
border- style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginMargem
-margem direitaMargem direita-
margem
superiorPreenchimento superior
preenchimento
- preenchimento
preenchimento esquerdoPreenchimento
esquerdo- preenchimento
- preenchimento
 
Rótulo de cor e fundo e comparação de atributos
Sintaxe CSS (sem distinção entre maiúsculas e minúsculas) Sintaxe JavaScript (sensível a maiúsculas e minúsculas)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
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 exibição
tipo de estilo de lista listStyleType
lista-estilo-imagem listStyleImage
lista-estilo-posição listStylePosition
estilo de lista listStyle
espaço em branco espaço em branco
 
Tags e atributos de estilo de texto são comparados à
sintaxe CSS (sem distinção entre maiúsculas e minúsculas) Sintaxe JavaScript (sensível a maiúsculas e minúsculas)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
 
Comparação de rótulos e atributos de texto
Sintaxe CSS (sem distinção entre maiúsculas e minúsculas) Sintaxe JavaScript (sensível a maiúsculas e minúsculas)
espaçamento entre letras espaçamento
linha-quebra de linhaQuebra
linha-altura de linhaAltura
texto-alinhamento textoAlinhar
texto-decoração textoDecoração
text-indent textIndent
text-justify textJustify
text- transform textTransform
vertical-align verticalAlign
Artigos Relacionados