Modificar Css de un elemento con JavaScript
En este tutorial aprenderemos cómo modificar las propiedades Css de un elemento con JavaScript
Modificar Css
Para poder manipular el css de un elemento usaremos .style de JavaScript
Veamos un ejemplo
<script> //Seleccionamos el elemento de id=titulo var titulo = document.getElementById("titulo"); //Cambiamos el color del texto del elemento titulo.style.color = "red"; //Cambiamos el tamaño de fuente del elemento titulo.style.fontSize = "20px"; </script>
Propiedades de estilos en JavaScript
Propiedad | Descripción |
---|---|
color | Color del texto |
font | Fuente del texto (font-style, font-variant, font-weight, font-size, line-height, font-family) Ej: elem.style.font=»13px Arial, Helvetica, sans-serif»; |
fontSize | Tamaño de la fuente del elemento (absoluto, relativo, distancia, porcentaje) |
fontWeight | Grosor del trazo del texto (normal, bold, bolder, lighter, 100, 200…. 900) |
fontFamily | Tipo de letra (nombre fuente, familia genérica) |
fontVariant | Variantes tipográficas (normal, small-caps) |
fontStyle | Inclinación del texto (normal, italic, oblique) |
backgroundColor | Color del fondo |
backgroundAttachment | Imagen fija o con scroll (scroll, fixed) |
backgroundImage | Ubicación de la imagen de fondo |
backgroundPosition | Posición de la imagen (top, left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x%, y%, xpos, ypos) |
backgroundRepeat | Repetición de la imagen (repeat-x, repeat-y, no-repeat) |
border | Borde del elemento (width, style, color) Ej: elem.style.border=»2px solid red»; |
borderTop | Borde superior (width, style, color) Se puede usar también borderTopColor, borderTopStyle y borderTopWidth |
borderRight | Borde derecho (width, style, color) Se puede usar también borderRightColor, borderRightStyle y borderRightWidth |
borderBottom | Borde inferior (width, style, color) Se puede usar también borderBottomColor, borderBottomStyle y borderBottomWidth |
borderLeft | Borde izquierdo (width, style, color) Se puede usar también borderLeftColor, borderLeftStyle y borderLeftWidth |
borderColor | Color del borde |
borderStyle | Estilo del borde (solid, dotted, dashed, inset, outset, groove, hidden, double, ridge, inherit) |
borderWidth | Ancho del borde |
wordSpacing | Espacio entre palabras |
letterSpacing | Espacio entre caracteres |
textIndent | Identación del texto |
textTransform | Transformación del texto (capitalize, uppercase, lowercase, none, inherit) |
textDecoration | Estilo de decoración del texto |
lineHeight | Espacio entre líneas |
textAlign | Alineación horizontal del texto |
margin | Margen del elemento (top, right, bottom, left) Se pueden poner de 1 a 4 valores |
marginTop | Margen superior |
marginRight | Margen derecho |
marginBottom | Margen inferior |
marginLeft | Margen izquierdo |
padding | Padding del elemento (top, right, bottom, left) Se puede poner de 1 a 4 valores |
paddingTop | Padding superior |
paddingRight | Padding derecho |
paddingBottom | Padding inferior |
paddingLeft | Padding izquierdo |
display | Colocación del elemento (inline, block, none) |
zIndex | Orden de posicionamiento del elemento |
position | Posicionamiento del elemento (static, absolute, relative, fixed) |
visibility | visibilidad del elemento (visible, hidden, collapse, inherit) |
verticalAlign | Alineación vertical del elemento (baseline, super, text-top, bottom, %, px, inherit) |
overflow | Comportamiento del contenido que no cabe en el elemento (visible, hidden, scroll, auto, inherit) |
cursor | Estilo del cursor sobre el elemento (crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, s-resize, se-resize, sw-resize, text, url, w-resize, wait) |
clear | Comportamiento de los elementos adyacentes a elementos posicionados de manera flotante (none, left, right, both, inherit) |
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo