Entre Códigos


El blog de Rubén Cantón

Reflexiones de un cerebro en fuga y artículos sobre posicionamiento, e-marketing, usabilidad y otros tecnicismos.

greyimg

Cambiar estilo con Javascript

Escrito por Ruben Cantón el Wednesday, 30 de January del 2008
Más del mismo tema: JavaScript, taller



Click aquí

Si eres diseñador y tu paciencia con los diferentes exploradores y sus distintas formas de interpretar el CSS ha llegado a su límite, tengo algo que mostrarte, y es que, ¿que me dirías si te digo que existe una forma de colocar una página de estilos distinta para cada explorador?

Pues existe, se puede hacer usando una sentencia muy sencilla en JavaScript o desde tu código fuente en el servidor. Os muestro cómo:


Desde JavaScript, ideal en páginas estáticas

Para hacerlo desde JavaScript aprovecharemos la capacidad del mismo para recorrer los objetos de la página, y a través de la cual puedes cambiar sus distintos valores, de forma que, si en la etiqueta de inclusión de la hoja de estilos establecemos un ID, podemos cambiar la ruta al mismo en función del explorador que el usuario esté utilizando:

<link rel="stylesheet" type="text/css" href="hoja.css" id="css">

<script type="text/javascript" language="JavaScript"> if (navigator.appName.indexOf("Microsoft Internet Explorer") !=-1) { document.getElementById("css").href= "cssIE.css";
} else {
document.getElementById("css").href= "cssFire.css"; }
</script>

Por supuesto, hay que hacer una llamada a la función en el onLoad del body, y puedes meter mas condicionales para mas tipos de explorador, utiliza la instrucción alert(navigator.appName); para saber el appName de cada uno de ellos. No olvides que es recomendable meter las funciones JavaScript en archivos externos y realizar una llamada, muy útil sobretodo si, como en este caso, pretendes reutilizarla en muchas páginas del site.

Al generar la página en el servidor

Pero si utilizar JavaScript no te convence o te parece arriesgado (el usuario podría tenerlo desactivado) siempre te queda la opción de realizar esta operación en el servidor, utilizando el lenguaje de servidor que tengas para generar tus páginas dinamicamente. Por ejemplo, en ASP.Net utilizaríamos lo siguiente:

Page_Load (...)
If Request.UserAgent.StartsWith("Mozilla") Then
Me.EtiquetaCSS.Attributes("href") = "estilosMZ.css"
Elseif Request.UserAgent.Contains("Internet Explorer") Then
Me.EtiquetaCSS.Attributes("href") = "estilosIE.css"
End If

//Para que funcione, habremos colocado la id "EtiquetaCSS" y la
// propiedad runat="server" en la etiqueta de inclusión del CSS:
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" runat="server" id="EtiquetaCSS"/>

El resto de lenguajes también incorporan formas de hacer esto mismo, pero tendrás que buscar en Google o entre sus librerías ya que de memoria no puedo decirte cómo.

Otras opciones

Si lo que quieres no es cambiar toda la página de estilos, sino tan sólo el estilo de un objeto o una propiedad, puedes hacerlo a través de JavaScript con un par de instrucciones sencillas. Accediendo al style del objeto y luego a la propiedad que deseas cambiar (como en el ejemplo de arriba) o cambiando el estilo al que tiene acceso:

function CambiarEstilo(){
  //Para cambiar todo el estilo del objeto:
  document.getElementById('elemento').className='nuevoEstilo';

  //Si en cambio sólo queremos cambiar una propiedad:
  document.getElementById('Elemento').style.propiedad='nuevoValor';

  Propiedad: cualquiera de las de css (color,background,border,margin,padding,...)
}

Bueno, pues eso es todo, pronto entenderéis que esto es mas útil de lo que parece, y acabaréis utilizándolo…

Ya hay 7 comentarios. ¡Falta el tuyo!

Escríbe aquí tu opinión

Nombre (necesario)

Email (no se mostrará)

Web (opcional)

mygif
January 30th, 2008 at 3:39 pm

Gracias Ruben, ahora mismo lo pongo en practica :P

mygif
2. JML
February 19th, 2008 at 9:08 am

En mi opinión, es muyo más sencillo utizar un condicional


mygif
3. JML
February 19th, 2008 at 9:08 am

Esto cargaría la hoja de estilo en IE cuya versión sea menor que la 7.

mygif
4. epigmenio
June 24th, 2008 at 5:07 pm

Amigo en verdad me has salvado la vida es un excelente codigo hermano, chido por personas como tu que hace aportaciones buenas a la programacion…excelente gracias

mygif
5. Leafar
February 16th, 2009 at 7:33 am

Gracias,andaba buscando esto XD

mygif
June 24th, 2009 at 4:20 pm

bendito sea el internet, gracias Rubén x este articulo

mygif
7. Anonymous
February 5th, 2010 at 5:33 am

He utilizado tu código, quisiera dejar sentado para quien no conozca la propiedad Attributes para ASP.NET (como fué mi caso) que se trata de un tipo array por lo que sobre C# se utiliza con corchetes.

Escríbe aquí tu opinión

Nombre (necesario)

Email (no se mostrará)

Web (opcional)

¿Quieres más?

Temas del blog

Busca por Entre Códigos

 

Últimos comentarios

Últimos artículos

Lo más comentado

Blogroll

Mis proyectos