Red de conocimiento informático - Material del sitio web - Cómo configurar el estilo del formulario html usando js

Cómo configurar el estilo del formulario html usando js

En primer lugar, comprenda la tabla de comparación de atributos de estilo de etiquetas CSS y JS:

Tabla de comparación de atributos de estilo de etiquetas CSS y JavaScript:

Comparación de atributos y etiquetas de cuadro

Sintaxis CSS (no distingue entre mayúsculas y minúsculas) Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas)

borde borde

borde-inferior bordeInferior

borde- color inferior bordeBottomColor

borde-estilo inferior bordeBottomStyle

borde-ancho inferior bordeBottomWidth

color del borde bordeColor

borde- borde izquierdoLeft

borde-color-izquierdo borderLeftColor

borde-estilo-izquierdo borderLeftStyle

borde-ancho-izquierdo borderLeftWidth

borde- borde derechoDerecho

borde-color-derecho bordeDerechoColor

borde-estilo-derecho bordeDerechoEstilo

borde-ancho-derecho bordeDerechoAncho

borde- estilo bordeEstilo

borde-superior bordeTop

borde-superior-color bordeTopColor

borde-superior-estilo bordeTopEstilo

borde-superior- ancho bordeTopWidth

ancho de borde borderWidth

ancho de borde borderWidth

p>

borrar borrar

float floatStyle

margen margen

margen inferior margen inferior

margen izquierdo margen izquierdo

margen-derecho margenDerecho

margen-superior margenSuperior

relleno relleno

relleno-inferior rellenoInferior

relleno-izquierdo rellenoIzquierdo

padding-right paddingRight

padding-top paddingTop

Etiquetas de color y fondo 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)

fondo fondo

fondo-attachment fondoAttachment

fondo-color fondoColor

fondo-imagen fondoImagen

posición de fondo posición de fondo

repetición de fondo repetición de fondo

color color

comparación de atributos y etiquetas de estilo

sintaxis CSS (no distingue entre mayúsculas y minúsculas) Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas)

display display

list-style-type listStyleType

list-style-image listStyleImage

list-style-position listStylePosition

list-style listStyle

white-space whiteSpace

Etiqueta de estilo de texto y comparación de atributos

p>

Sintaxis CSS (no distingue entre mayúsculas y minúsculas) Sintaxis de JavaScript (distingue entre mayúsculas y minúsculas)

fuente fuente

font-family fontFamily

font- tamaño

fontSize

font-style fontStyle

font-variant fontVariant

font-weight fontWeight

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 salto de línea

alto de línea altura de línea

text-align textAlign

text-decoration textDecoration

text-indent textIndent

text-justify textJustify

text-transform textTransform

vertical-align verticalAlign

lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES"gt;

lt;HTMLgt;

lt;HEADgt;

lt;TITLEgt; Nuevo documento lt;/TITLEgt; p>

lt; lenguaje de script="javascript"gt;

función validar(){

if (document.all("nombre").valor == " " ){

document.all("name").style["borderColor"]="red"; //Esto es

return

}

}

lt;/scriptgt;

lt;BODYgt;

lt;input type="text" nombre=" nombre" gt;

lt;/BODYgt;

lt;/HTMLgt;