Hojas de estilo con Javascript

Con la aparición de la versión 4 de su navegador, Netscape comenzó a soportar las hojas de estilo en cascada. Pero a la vez creó una nueva manera de definirlas por medio del lenguaje Javascript. Hay que destacar que esta es una solución propietaria y sólo funciona en los navegadores de esta compañía.

La utilidad más importante de la definición mediante Javascript de hojas de estilo es la posibilidad de hacerlo desde el código "normal", pudiendo elegir que definición tomar dependiendo de, por ejemplo, el número de colores simultáneos que puede ver el cliente, o el tamaño de la ventana de su navegador, etc..

Sintaxis Javascript

La sintaxis Javascript para definir hojas de estilo es muy fácil de aprender (una vez comprendida la CSS). El mejor modo de entenderlo es mediante un ejemplo:

<STYLE TYPE="text/javascript">
  tags.H1.color = "green";
  tags.P.fontSize = 10;
  tags.P.marginLeft = 20;
</STYLE>

Vemos que el parámetro TYPE ha cambiado y ahora nos dice que las hojas están definidas con la sintaxis JavaScript. Esta sintaxis, como es lógico, está más orientada a objetos que la anterior. Dentro del objeto tags se definen los objetos P y H1 cuyos atributos estamos modificando.

En este ejemplo (que es el equivalente a uno de los primeros del capítulo anterior) le decimos al navegador que todo el texto que se encuentra entre las etiquetas <H1></H1> será de color azul, y el que está entre las etiquetas <P></P> será de un tamaño de 10 ptos. y tendra un margen izquierdo de 20 ptos.

Poco más queda por decir. Se puede observar que los atributos de una sola palabra se escriben igual en ambas sintaxis. Sin embargo, aquellos que tienen dos se escriben en CSS en minúsculas y separados por un guión, mientras que en JavaScript se juntan ambas palabras empezando la primera por una minúscula y la segunda por una mayúscula.

Con Javascript podemos (casi diría que debemos) agrupar atributos referidos a la misma etiqueta, para mayor claridad y sencillez a la hora de escribirlos. Así, los dos atributos modificados en la etiqueta <P> se escribirían así:

  with (tags.P) {
    fontSize = 10;
    marginLeft = 20; }

Hay que indicar que los estilos definidos con Javascript se utilizan de la misma manera que los definidos con CSS: sólo cambia la sintaxis de dicha definición.

Definición de estilos

Al igual que con CSS, mediante la sintaxis JavaScript podemos definir clases de estilos y estilos individualizados.

Mediante clases

Seguimos con una jerarquía de objetos a la hora de definir clases. Por ejemplo: classes.all.NombreClase.color = "blue";

En lugar de tags, donde modificabamos etiquetas, ahora ponemos classes. Luego indicamos que queremos una clase que modifique todas las etiquetas (all), seguido del nombre de la clase y el atributo a modificar.

Mediante ID

De la misma manera, cuando queremos usar el parámetro ID, deberemos usar la siguiente jerarquía: ids.NombreID.color = "blue";

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.

En Netscape

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";

Un modelo común

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>

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

HAY 1 COMENTARIOS
  • Anónimo dijo:

    bien es lo que buscaba solo que los colores no me los pone :(

Conéctate o Regístrate para dejar tu comentario.