En 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 |