CSS y JS trabajan en estrecha colaboración para agregar muchos efectos únicos a nuestras páginas. Para lograr algún efecto especial, necesitamos usar Javascript para cambiar dinámicamente las propiedades 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: ¿Cuál debería ser el atributo después del estilo en JavaScript?
<tipo de script="texto/javascript">
función imageOver(e) {
e.style.border="1px rojo sólido";
}
función imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
de tabla de comparación de atributos de estilo CSS de JavaScript
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)
frontera frontera
borde inferior borde inferior
borde-color-inferior bordeBottomColor
borde-fondo-estilo bordeBottomStyle
borde-inferior-ancho bordeInferiorAncho
color del borde color del borde
frontera-izquierda fronteraIzquierda
borde-izquierdo-color bordeIzquierdoColor
borde-estilo-izquierdo bordeLeftStyle
borde-ancho-izquierdo bordeLeftWidth
frontera-derecha fronteraDerecha
borde-color-derecho bordeDerechoColor
borde-estilo-derecho bordeDerechoEstilo
borde-ancho-derecho bordeDerechoWidth
estilo de borde estilo de borde
borde superior borde superior
borde-color-superior bordeTopColor
borde-top-estilo bordeTopStyle
borde-ancho superior bordeTopWidth
ancho de borde ancho de borde
claro claro
flotador estilo flotante
margen margen
margen inferior margen inferior
margen izquierdo margen izquierdo
margen derecho margen derecho
margen superior margen superior
relleno relleno
acolchado inferior acolchado inferior
padding-left paddingLeft
padding-right paddingRight
acolchado superior paddingTop
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 de fondo
fondo-adjunto fondoAdjunto
color de fondo color de fondo
imagen de fondo imagen de fondo
posición de fondo posición de fondo
repetición de fondo repetición de fondo
color color
Etiquetas de estilo 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)
pantalla de visualización
lista-estilo-tipo listStyleType
lista-estilo-imagen listStyleImage
lista-estilo-posición listStylePosition
estilo de lista estilo de lista
espacio en blanco espacio en blanco
Etiqueta de estilo de texto 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)
fuente fuente
familia de fuentes fontFamily
tamaño de fuente Tamaño de fuente
estilo de fuente estilo de fuente
variante de fuente fontVariant
peso de fuente peso de fuente
Etiqueta de texto 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)
espaciado entre letras espaciado entre letras
salto de línea
altura de línea altura de línea
alinear texto alinear texto
decoración de texto decoración de texto
sangría de texto sangría de texto
justificar texto justificar texto
transformación de texto transformación de texto
alineación vertical alineación vertical