Hojas de Estilo con JavaScript (2)

Definición dinámica de hojas de estilo

Para aprender a definir hojas de estilo desde el código Javascript en los dos navegadores dinámicos por excelencia, miraremos primero cómo se hace con cada uno por separado.

Ya que Netscape inventó la sintaxis JavaScript, es de esperar que la use para estos menesteres. De hecho, para definir un estilo sólo tenemos que utilizar cualquiera de las maneras estudiadas en la página anterior, precedidas por document.:

document.tags.P.fontSize = 10;
document.classes.all.NombreClase.color = "blue";
document.ids.NombreID.color = "blue";

En capítulos posteriores desentrañaremos com mayor detalle las distintas maneras de escribir código compatible con los dos navegadores. Ahora sólamente usaremos una de ellas. Con ella comprobamos el nombre y la versión del navegador y bifurcamos según sea Netscape o Explorer. Si la versión es inferior a la 4.0 no hacemos nada, claro.

La principal mejora es que comprime los archivos de definición de fuentes de manera comparable al PFR de Netscape. Tiene también el pequeño problema del dominio, aunque al menos en este caso sí que podremos ver nuestras páginas desde el disco duro, ya que estas fuentes son las mismas que tenemos instaladas en nuestro sistema.

<STYLE TYPE="text/css" ID="misestilos"></STYLE>
<SCRIPT LANGUAGE="javascript">
  navegador = navigator.appName;
  versionNav = parseInt(navigator.appVersion);
  if (versionNav>=4) {
    if ((navegador=="Netscape") {
      document.tags.P.fontSize = 10;
      document.classes.all.NombreClase.color = "blue";
      document.ids.NombreID.color = "blue";
    } else if (navegador.indexOf('Explorer') != -1)
      document.styleSheets["misestilos"].addRule("P", "font-size:25pt");
      document.styleSheets["misestilos"].addRule(".NombreClase", "color:blue");
      document.styleSheets["misestilos"].addRule("#NombreID", "color:blue");
    }
  }
</SCRIPT>

Usuarios que han visto este tema también han visto...

- Pasando datos entre paginas con JavaScript
- Validar que el texto introducido es un numero con Javascript
- Operadores especiales en JavaScript
- Obligar a rellenar los campos en JavaScript
- Manejo de errores con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento