CSS y JS trabajan en estrecha colaboración para agregar muchos efectos únicos a nuestras páginas. También hay casos relacionados en 52CSS.com. 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="01.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript Etiqueta del cuadro de comparación de atributos de estilo CSS
y comparación de atributos
Sintaxis CSS (no distingue entre mayúsculas y minúsculas) JavaScript sintaxis (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
padding-top paddingTop
etiquetas y atributos de color y fondo comparados con
la 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
Las etiquetas de estilo y los atributos se comparan con
la 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
espacios en blanco
Las etiquetas y atributos de estilo de texto con espacios en blanco se comparan con
la 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
font-weight fontWeight
etiquetas de texto y atributos se comparan con
la 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