Se puede usar JavaScript para acceder y cambiar las propiedades de los elementos CSS-P. De cualquier manera, parte de la sintaxis difiere según se use el Netscape o el Explorer. A continuación, mostraré una forma de crear fácilmente "Cross-Browser JavaScripts" o, traducido literalmente al español, "scripts de navegador cruzado", es decir, scripts que funcionan en los dos navegadores.

Comprobación del navegador

Lo primero que se debe hacer es, por tanto, comprobar el navegador con el que el usuario está accediendo a la página DHTML. El siguiente código se convertirá en estándar a la hora de realizar esta tarea:

	ns4 = (document.layers)? true:false
	ie4 = (document.all)? true:false

El objeto document.layers es propio del Netscape, mientras que el objeto document.all es del Explorer. Lo que se hace en el código mostrado no es más que colocar verdadero o falso en las dos variables (ns4 para el Netscape 4.0 y ie4 para el Explorer 4.0), según el caso.

Tras ejecutar el código anterior, siempre que alguna tarea dependa del navegador en el que se esté visualizando la página, no se tiene más que utilizar las dos variables anteriores:

	if (ns4) 
	{		
		// Hacer algo para el Netscape Navigator 4.0	
	}	
	if (ie4) 
	{
		// Hacer algo para el Internet Explorer 4.0	
	}

Ejemplo

Uso del JavaScript y CSS-P

Digamos por ejemplo que tenemos un tag DIV como el siguiente:

	<DIV ID="divIcono" STYLE="position:absolute; left:50; top:100; width:30;">
	<IMG SRC="Icono.gif" WIDTH=30 HEIGHT=30 BORDER=0>
	</DIV>

En el Netscape, la forma general para acceder a una propiedad CSS-P es:

	document.divIcono.nombrePropiedad

En el caso del Explorer:

	divIcono.style.nombrePropiedad

o bien:

	document.all["divIcono"].style.nombrePropiedad

Donde, por supuesto, nombrePropiedad puede ser cualquier propiedad CSS-P, como left, top, width, etc...

Simplificando Código (Variables Directas)

Lo anterior nos lleva a que, si queremos cambiar, por ejemplo, el ancho del tag DIV, tenemos que escribir lo siguiente:

	if (ns4)
		document.divIcono.width = 150px
	if (ie4)
		divIcono.style.width = 150px

Y esto se debería repetir para cada uno de los tags que queramos modificar, lo que generaría un auténtico montón de líneas y, encima, la mayor parte de ellas pertenecerían a la estructura condicional if . Para evitar esto, se puede utilizar una técnica alternativa, que simplificaría bastante el código. La idea está en crear una variable adicional para cada tag DIV, que vamos a hacer que apunte hacia el objeto en sí. Con un ejemplo se verá mejor:

	if (ns4)
		nuevaVariable = document.divIcono
	if (ie4)
		nuevaVariable = divIcono.style

Tras este código, si queremos cambiar el ancho del tag, no tenemos que preocuparnos del navegador en el que se está visualizando la página, porque la variable sobre la que vamos a modificar el ancho ya apunta hacia el objeto propiamente dicho:

	nuevaVariable.width = 150px

Esto tiene mayores beneficios cuanto mayor sea el número de tags DIV que vayamos a modificar, puesto que nos ahorramos más código. Lo que se haría sería crear una función inicial que se ejecutaría una sola vez, cuando se cargase la página, y haría que las variables apuntasen hacia los objetos.

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