NorfiPC

Como cambiar y modificar el estilo CSS de las páginas web con Javascript

Tweet

¿Qué son los estilos CSS de las páginas web?

El estilo de las páginas web, es decir la forma en que el navegador representa los elementos que la componen, se define mediante CSS, Cascading Style Sheets (en español Hojas de Estilo en Cascada). No es imprescindible el uso de CSS ya que si el navegador no lo encuentra utilizará el estilo predeterminado, pero la gran mayoría de las páginas en internet lo emplean.
No son más que instrucciones que pueden estar impregnados en el código fuente (HTML) o en un archivo externo al que la página hace referencia. La gran limitación de CSS, es que después que se cargue la página el usuario no tendrá ningún tipo de control sobre el estilo empleado en esta.
Javascript ofrece la posibilidad, gracias a ser un lenguaje interactivo, de permitir realizar cualquier tipo de modificación en el estilo original de una página y además sin que sea necesario en lo absoluto volver a cargar la página del servidor.
Es posible modificar el tamaño, el estilo, el tipo de fuente y todos los demás atributos del texto, además el color del fondo, estructura de tablas, listas, en fin el estilo de todos los elementos que componen la página.
Para que el usuario pueda realizar estas modificaciones puede utilizarse cualquier evento, desde un clic del ratón, botones, vínculos y cualquier otro método con que se pueda trasmitir una instrucción.

Como obligar al navegador a usar un estilo diferente con Javascript

En Javascript se puede utilizar para cambiar el estilo de las páginas el objeto Estilo, representa una declaración independiente, puede ser accedido de varias formas, desde el documento o desde el elemento individual al que va dirigido el estilo.
La sintaxis es la siguiente:

document.body.style.fontSize="24px"
document.getElementById("id").style.property="value"

El primer método permite aplicar estilo de forma general al documento y el segundo es más específico, al ser dirigido a un bloque o elemento definido por un identificador ID.

Ejemplos con los códigos de cómo cambiar el estilo de elementos en una página.

Algunos ejemplos usando los dos métodos anteriores, funcionan sin refrescar la página.

A continuación una tabla con una lista de las propiedades más utilizadas, con la descripción y los valores que le corresponden, que se pueden utilizar para cambiar el estilo de cualquier elemento HTML en cualquier página web, se pueden aplicar utilizando los dos primeros métodos mencionados.

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

Propiedad	Descripcion
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
visibility	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

Más información sobre los valores de las propiedades que no aparezcan relacionados en la tabla, puede encontrarse en la siguiente página de este sitio:
◄ Tutorial y manual básico del uso de los estilos CSS.

Como insertar nuevas reglas en el estilo CSS con Javascript

También de una forma más compleja se puede escribir un nuevo script de estilo CSS, con los atributos y valores que se quieran agregar al documento o elemento, la forma más práctica de hacerlo es mediante un Bookmarklet. A diferencia de los otros métodos anteriores, lamentablemente no funciona en el navegador Internet Explorer.
Por ejemplo, con el siguiente código se modifica el tamaño y el color del encabezado H3 con el que comienza esta sección y el tamaño y el color del texto del documento, es solo un ejemplo.
Para retornar a la normalidad usa el botón Refrescar.

β Insertar regla estilo  

El codigo utilizado es el siguiente:

<a href="javascript:{var S=document.createElement('style');S.type = 'text/css';
S.appendChild(document.createTextNode('h2{font-size:36px;color:blue;}
body{color:green;font-size:20px;}'));document.body.appendChild(S);};
void 0">Insertar regla estilo</a>

---

Páginas relacionadas

Páginas con información en sitios externos

Referencia sobre propiedades de Javascript para modificar el objeto Estilo, en el sitio W3Schools.com.
• HTML DOM Style Object