Aunque los días en que JavaScript usaba bloques de código largos y aburridos para apuntar a navegadores específicos han terminado, todavía es necesario usar ocasionalmente algunos bloques de código simples y detección de objetos para garantizar que parte del código funcione correctamente en la máquina del usuario.
En este artículo, describiré 7 formas en que la sintaxis de JavaScript difiere entre Internet Explorer y Firefox.
1. Propiedad "flotante" de CSS
La sintaxis básica para obtener una propiedad CSS específica de un objeto determinado es la propiedad object.style, y las propiedades con guiones utilizan la notación camel en su lugar. Por ejemplo, para obtener el atributo de color de fondo de un div con el ID "encabezado", necesitamos usar la siguiente sintaxis:
document.getElementById("header").style.borderBottom= "1px sólido #ccc";
Pero como "float" es una palabra reservada en JavaScript, no podemos usar object.style.float para obtener el atributo "float". Así es como lo usamos en ambos navegadores:
Sintaxis de IE:
document.getElementById("header").style.styleFloat = "izquierda";
Sintaxis de Firefox:
document.getElementById("header").style.cssFloat = "izquierda";
2. Estilo de cálculo de elementos.
Al utilizar la propiedad object.style.property anterior, JavaScript puede obtener y modificar fácilmente el estilo CSS establecido del objeto. Pero la limitación de esta sintaxis es que solo puede obtener estilos en línea en HTML o estilos configurados directamente usando JavaScript. El objeto de estilo no puede obtener estilos establecidos mediante hojas de estilos externas. Para obtener el "estilo calculado" de un objeto utilizamos el siguiente código:
Sintaxis de IE:
var miObjeto = document.getElementById("encabezado");
var miEstilo = miObjeto.actualEstilo.fondoColor;
Sintaxis de Firefox:
var miObjeto = document.getElementById("encabezado");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var miEstilo = miEstiloComputado.backgroundColor;
3. Obtenga el atributo "clase" del elemento.
De manera similar al caso del atributo "flotante", los dos navegadores utilizan diferentes métodos de JavaScript para obtener este atributo.
Sintaxis de IE:
var miObjeto = document.getElementById("encabezado");
var miAtributo = miObjeto.getAttribute("nombredeclase");
Sintaxis de Firefox:
var miObjeto = document.getElementById("encabezado");
var miAtributo = miObjeto.getAttribute("clase");
4. Obtener el atributo "para" de la etiqueta
es lo mismo que 3. Usar JavaScript para obtener el atributo "para" de la etiqueta también tiene una sintaxis diferente.
Sintaxis de IE:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
sintaxis de Firefox:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
Se utiliza la misma sintaxis para el método setAtrribute.
5. Obtener la posición del cursor
Es raro obtener la posición del cursor de un elemento. Si necesita hacer esto, la sintaxis de IE y Firefox también es diferente. Este código de muestra es bastante básico y normalmente se usa como parte de muchos controladores de eventos complejos y solo se usa para describir las diferencias. Cabe señalar que los resultados en IE son diferentes a los de Firefox, por lo que existen algunos problemas con este método. A menudo, esta diferencia se puede compensar obteniendo la "posición de desplazamiento", pero eso es tema para otro artículo.