Para lograr algún efecto especial, necesitamos usar Javascript para cambiar dinámicamente el atributo CSS de una determinada etiqueta. Por ejemplo: cuando el mouse pasa sobre una imagen, agregamos un borde a la imagen. El código puede ser el siguiente:
detrás del estilo en JavaScript ¿Cuáles deberían ser las propiedades de?
| etiqueta de cuadro y comparación de atributos | ||
|---|---|---|
| Sintaxis CSS (no distingue entre mayúsculas y minúsculas) | Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas) | |
| borde | borde | borde|
| inferior | borde inferior | |
| borde inferior color borde inferior Color | borde | |
| inferior estilo | borde inferior Estilo | |
| borde inferior ancho borde Fondo | Ancho | |
| borde | -borde | de colorBorde de color |
| - | bordeizquierdoBorde | |
| izquierdo-borde de color | izquierdoBorde de | |
| color | izquierdo | |
| -borde de estilo | izquierdoBorde | de|
| - | borde de ancho izquierdo | bordeBorde de ancho|
| izquierdo | - | |
| derechoborde | de estilo | |
| derechoborde de ancho derechoborde de ancho | derechoBorde | |
| derecho-estilo | borderStyle | |
| borde-top | borderTop | |
| border-top-color | borderTopColor | |
| border-top-style | borderTopStyle | |
| border-top-width | borderTopWidth | |
| border-width | borderWidth | |
| clear | clear | |
| float | floatStyle | |
| margen | margen margen | |
| -margen inferiorMargen | inferior | |
| margen | izquierdoMargen izquierdo- | |
| margen | derechoMargen derecho | |
| margen | ||
| superiorRelleno | superior | |
| acolchado acolchado | ||
| - | relleno inferiorrelleno | |
| inferior-relleno izquierdorelleno | izquierdo | |
| - | relleno | derechorelleno|
| derecho- | relleno | superiorarriba|
| Comparación de atributos y etiquetas de color y fondo | ||
| Sintaxis CSS (no distingue entre mayúsculas y minúsculas) | Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas) | |
| fondo fondo | fondo | |
| -adjunto | fondoAdjunto | |
| fondo-color | fondoColor | |
| fondo-imagen | fondoImagen | |
| fondo-posición | fondoPosición | |
| fondo-repetir | fondoRepetir | |
| color | color | |
| Las etiquetas y atributos de estilo se comparan con | ||
| la sintaxis CSS (no distingue entre mayúsculas y minúsculas) | Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas) | |
| mostrar | listade visualización | |
| -estilo-tipo | listaEstiloTipo | |
| lista-estilo-imagen | listaEstiloImagen | |
| lista-estilo-posición | listaEstiloPosición | |
| lista-estilo | listaEspacio | |
| en blanco espacio | en blanco | |
| Las etiquetas y atributos de estilo de texto se comparan con | ||
| la sintaxis CSS (no distingue entre mayúsculas y minúsculas) | Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas) | |
| font | font | |
| font-family | fontFamily | |
| font-size | fontSize | |
| font-style | fontStyle | |
| font-variant | fontVariant | |
| font-weight | fontWeight | |
| Comparación de atributos y etiquetas de texto | ||
| Sintaxis CSS (no distingue entre mayúsculas y minúsculas) | Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas) | |
| espaciado entre letras espaciado | entre letras | |
| línea de salto | de líneaSalir | |
| línea-altura | de líneaAltura | |
| de texto-alinear | textoAlinear | |
| texto-decoración de | textoDecoración | |
| de texto-sangría | de textoSangría de | |
| texto-justificar | textoJustificar | |
| texto-transformar | textTransform | |
| alineación vertical | verticalAlign | |