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

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

- Marquesina Ascendente
- DOMTool: Crea código DOM a partir de HTML
- Contadores de Fecha
- Detectar mediante JavaScript cuando una imagen no es cargada
- Función createElement y appendChild en Javascript

- Versión imprimible de este documento
- Enviar por e-mail este documento