Lista de propiedades de Javascript para modificar el estilo de las páginas

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.
top feature image

Lista de propiedades de Javascript para modificar el estilo de las páginas

JavascriptEn el post de hoy, voy a dejar aquí colgado algunas buenas propiedades de javascript que nos serán muy útiles a la hora de modificar el CSS de nuestras páginas webs. Supongo que no serán todas las posibilidades habidas para ello, pero creo que son las que más utilizo yo a la hora de  hacer “mis cosillas” con la web.

Estas propiedades se añadirán dentro de nuestros scripts o dentro de nuestras etiquetas html y le cambiaremos el estilo con un java:void.

Ahora vamos  a por el turrón del asunto, aquí va la tabla.

Propiedad Descripción
background Establece todas las propiedades del background o fondo en una única declaración de forma abreviada, son 5 las propiedades separadas por un espacio:
background-color, background-image, background-repeat, background-attachment, background-position
Se usa de la siguiente forma:
Object.style.background=”color image repeat attachment position”
Por ejemplo:
document.body.style.background=”#f3f3f3 url(‘foto.png’) no-repeat right top”;
backgroundAttachment Especifica cuando la imagen empleada como fondo permanece fija o se desplaza.Las opciones son:
scroll Se desplaza con la pagina (Predeterminado)
fixed Permanece fija
backgroundColor Especifica el color del fondo
backgroundImage Especifica la ubicación de la imagen a emplear como fondo. Por ejemplo:
document.body.style.backgroundImage=”url(‘foto.png’)”;
backgroundPosition Posición de la imagen utilizada. Se usan dos valores, si solo se especifica uno la imagen será centrada. Los valores pueden ser:
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
x% y%
xpos ypos
backgroundRepeat Especifica si la imagen empleada se repite para llenar toda el área de la página.
repeat Es repetida en las dos dimensiones, es el valor predeterminado.
repeat-x Solo se repite en el eje horizontal
repeat-y Solo se repite en el eje vertical
no-repeat No es repetida
border Establece las propiedades del borde en una sola declaración de la siguiente forma:
Object.style.border=”width style color”
Por ejemplo:
document.getElementById(“ejemplo”).style.border=”thick solid green”;
Las restantes propiedades que se pueden usar de forma individual para definir el estilo del borde son:
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth
outline Especifica las propiedades de outline (borde de fuente) en una sola declaración de la siguiente forma:
Object.style.outline=”width style color”
Por ejemplo:
document.getElementById(“ejemplo”).style.outline=”thick solid #0000FF”;
Las restantes propiedades que se pueden usar de forma individual para definir el estilo outline son:
outlineColor
outlineStyle
outlineWidth
listStyle Especifica las siguientes propiedades en una sola declaración:
list-style-image, list-style-position y list-style-type, se usa:
Object.style.listStyle=”type position image”
También se pueden usar de forma individual:
listStyleImage
listStylePosition
listStyleType
margin Establece todas las propiedades de los márgenes en una sola declaración. Esta propiedad puede establecerse indicando desde 1 a 4 valores.
• Un valor, por ejemplo: div {margin: 50px} todos los márgenes serán de 50px
• Dos valores, por ejemplo: div {margin: 50px 10px} top (superior) y bottom (inferior) serán de 50px, left (izquierda) y right (derecha) serán de 10px.
• Tres valores, por ejemplo: div {margin: 50px 10px 20px} el valor de top será 50px, left y right será 10px, bottom sera 20px.
• Cuatro valores, por ejemplo: div {margin: 50px 10px 20px 30px} el valor de top será 50px, right será de 10px, bottom será de 20px, left será de 30px.
Los valores se pueden definir de tres formas alternativas
“% length auto”
Por ejemplo:
document.getElementById(“ejemplo”).style.margin=”2px 2px 5px 5px”;
También se pueden usar de forma individual:
marginBottom
marginLeft
marginRight
marginTop
padding Especifica de forma conjunta los valores del padding (espaciado)de un elemento, se pueden usar hasta cuatro valores. Para emplear los valores utiliza el mismo método de margin. Por ejemplo:
document.getElementById(“ejemplo”).style.padding=”10px 0 5px 0″;
También se pueden usar de forma individual:
paddingBottom
paddingLeft
paddingRight
paddingTop
cssText Especifica una declaración de estilo como una cadena de texto.
clear Especifica la posición de un elemento de forma relativa a un objeto que flota.
clip Especifica que parte de un elemento posicionado es visible.
cssFloat Establece la alineación horizontal de un elemento. Pueden usarse tres valores de la siguiente forma:
Object.style.cssFloat=”left|right|none”
Por ejemplo:
document.getElementById(“ejemplo”).style.cssFloat=”left”;
cursor Establece el estilo a emplearse en el cursor del ratón de la siguiente forma:
Object.style.cursor=”valor”
Los valores pueden ser: auto(predeterminado), crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, s-resize, se-resize, sw-resize, text, url, w-resize, wait.
Por ejemplo:
document.getElementById(“ejemplo”).style.cursor=”pointer”;
display Define la forma en que se muestra un elemento HTML, los métodos más empleados son: “inline” o “block”, también es muy usado para ocultar elementos de la forma siguiente:
document.getElementById(“ejemplo”).style.display=”none”;
 overflow Especifica que hacer si el contenido de un elemento rebasa el espacio que proporciona este.
 position  Especifica el tipo de posicionamiento usado para un elemento, pueden usarse los siguientes valores (static, relative, absolute o fixed)
 verticalAlign  Especifica la alineación vertical de un elemento
 visivility  Especifica la visibilidad de un elemento
 zIndex  Especifica el orden del posicionamiento de un elemento
 orphans  Especifica el mínimo numero de líneas para un elemento que tiene que ser visible en la parte inferior de la página.
 widows  Especifica el mínimo numero de líneas para un elemento que tiene que ser visible en la parte superior de la página.
 borderCollapse  Establece si el borde de una tabla debe colapsar en una simple línea
 borderSpacing  Espaciado del borde en una tabla
 captionSide  Posición del elemento caption de una tabla
 emptyCells Especifica si se debe mostrar el borde y fondo de una celda vacía
 color  Establece el color del texto.
 direction Establece la dirección del texto
 font  Establece todas las propiedades del elemento fuente en una sola declaración.
Pueden usarse los valores: font-style, font-variant, font-weight, font-size, line-height y font-family.
Hazlo de la siguiente forma:
Object.style.font=”style variant weight size/lineHeight family”
Por ejemplo:
document.getElementById(“ejemplo”).style.font=”italic bold 18px arial,serif”;
También pueden usarse de forma individual las siguientes propiedades:
fontFamily
fontSize
fontSizeAdjust
fontStyle
fontVariant
fontWeight
 letterSpacing  Especifica el espacio entre caracteres en el texto.
 lineHeight  Especifica el espacio entre líneas en el texto.
 textAlign  Especifica la alineación horizontal del texto.
 textDecoration  Especifica el estilo de decoración del texto.
 textIndent Establece la indentacion utilizada en la primera línea del texto.
 textTransform  Establece la propiedad Transform usada en el texto.
 wordSpacing  Establece el espacio entre palabras en el texto.
 Para la posición y tamaño de cada elemento se pueden usar las siguientes propiedades:
Bottom, left, right, top
Height, width, maxHeight, maxWidth , minHeight ,minWidth


Deja un comentario

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