aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Leyendo el título del artículo debes pensar «¿Solo 7?». Y es que Internet Explorer y Firefox se parecen en que los dos son navegadores y … poco más 😀

En ImpressiveWeb hacen esta corta recopilación de 7 diferencias Javascript que debemos tener presentes para nuestros scripts.

1) La propiedad «float» de CSS

Generalmente cuando accedemos a una propiedad relacionada al estilo de un elemento solemos usar element.style.propiedad, pero para la propiedad float usar el sistema element.style.float no nos va a ser posible.

// IE
document.getElementById("elem").style.styleFloat = "left"; // right

// FF
document.getElementById("elem").style.cssFloat = "left"; // right

2) Estilos computados de un elemento

Si queremos acceder a los estilos procesados ya por el navegador nos encontramos con una diferencia significante en el sintaxis para ambos navegadores.

// IE
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;

// FF
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;  

// MIX
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle ?
		myObject.currentStyle.backgroundColor :
   	        document.defaultView.getComputedStyle(myObject, null).backgroundColor;

3) Accediendo al «class» de un elemento

Debido a la especificación de Internet Explorer, cuando queremos acceder al class de un elemento usando getAttribute() debemos modificar el nombre que solicitamos.

// IE
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");  

// FF
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

4) Accediendo al atributo «for» de las etiquetas <label />

Exactamente lo mismo ocurre con el atributo for de las etiquetas <label /> que en Internet Explorer para solicitar esta información, debemos reemplazar el nombre que pedimos.

// IE
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");  

// FF
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

5) Obtener la posición del puntero del ratón

Otra diferencia y que mucho nos hace agrandar nuestro código es la localización del puntero.

// IE
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;  

// FF
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.page;
myCursorPosition[1] = event.pageY;   

// MIX
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX || event.page;
myCursorPosition[1] = event.clientY ||event.pageY;

6) Obtener el tamaño del navegador o del área visible

Al obtener el tamaño de la pantalla y del area visible nos encontramos con el mismo problema. Parece que no se ponen de acuerdo en que nombre ponerle a las propiedades comunes.

// IE
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;  

// FF
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

Joseanpg nos amplia el motivo de dicha diferencia en el comentario #1 y en este enlace

7) Transparencias

Si las transparencias en CSS ya eran un desastre donde nos veíamos obligados a usar hacks dependiendo del navegador en javascript, nos encontramos el mismo problema.

// CSS
#myElement {
   filter: alpha(opacity=50);  // IE
   opacity: 0.5;  // FF
}  

// IE
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";  

// FF
var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";