Modificar Css de un elemento con JavaScript

Modificar Css de un elemento con JavaScript

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.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas