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