Inicio Apuntes FPApuntes DAM Lista de propiedades de Javascript para modificar el estilo de las páginas

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

Publicado por entreunosyceros
Publicado el: Última actualización:

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

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.

PropiedadDescripción
backgroundEstablece 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»;
backgroundAttachmentEspecifica cuando la imagen empleada como fondo permanece fija o se desplaza.Las opciones son:
scroll Se desplaza con la pagina (Predeterminado)
fixed Permanece fija
backgroundColorEspecifica el color del fondo
backgroundImageEspecifica la ubicación de la imagen a emplear como fondo. Por ejemplo:
document.body.style.backgroundImage=»url(‘foto.png’)»;
backgroundPositionPosició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
backgroundRepeatEspecifica 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
borderEstablece 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
outlineEspecifica 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
listStyleEspecifica 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
marginEstablece 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
paddingEspecifica 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
cssTextEspecifica una declaración de estilo como una cadena de texto.
clearEspecifica la posición de un elemento de forma relativa a un objeto que flota.
clipEspecifica que parte de un elemento posicionado es visible.
cssFloatEstablece 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»;
cursorEstablece 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»;
displayDefine 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»;
 overflowEspecifica 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
 emptyCellsEspecifica si se debe mostrar el borde y fondo de una celda vacía
 color Establece el color del texto.
 directionEstablece 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.
 textIndentEstablece 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

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.