Diferencias en la sintaxis de JavaScript entre IE y Firefox

Aunque el período en el historial de JavaScript de usar bloques de código largos y molestos para dirigir los navegadores específicos, todavía es necesario usar ocasionalmente bloques de código simples y detección de objetos para garantizar que algún código funcione correctamente en las máquinas de usuarios.

En este artículo, describiré brevemente los 7 aspectos diferentes de la sintaxis de JavaScript entre Internet Explorer y Firefox.

1. Atributo "flotante" CSS

La sintaxis básica para obtener un atributo CSS específico de un objeto dado es el atributo de estilo objeto, y los atributos con guión deben ser reemplazados por nomenclatura de camello. Por ejemplo, para obtener la propiedad de color de fondo de un DIV con "encabezado" de ID, necesitamos usar la siguiente sintaxis:

La copia del código es la siguiente: document.getElementById ("Header"). Style.borderbottom = "1px Solid #CCC";

Sin embargo, dado que "Float" es una palabra reservada para JavaScript, no podemos usar Object.Style.float para obtener el atributo "flotante". Así es como lo usamos en dos navegadores:

Es decir, sintaxis:

La copia del código es la siguiente: document.getElementById ("encabezado"). Style.stylefloat = "izquierda";

Sintaxis de Firefox:

La copia del código es la siguiente: document.getElementById ("encabezado"). Style.cssfloat = "izquierda";

2. Estilo de cálculo de elementos

Al usar el objeto anterior.style.property, JavaScript puede obtener fácilmente y modificar el estilo CSS del objeto. Sin embargo, la limitación de esta sintaxis es que solo puede obtener estilos en línea en HTML, o usar directamente JavaScript para establecer estilos. El objeto de estilo no puede establecer estilos utilizando una hoja de estilo externa. Para obtener el "estilo calculado" del objeto, usamos el siguiente código:

Es decir, sintaxis:

 var myObject = document.getElementById ("encabezado"); var mystyle = myObject.CurrentStyle.BackgroundColor;

Sintaxis de Firefox:

 var myObject = document.getElementById ("Header"); var myComputedStyle = document.defaultView.getComputedStyle (myObject, null); var myStyle = myComputedStyle.BackgroundColor;

3. Obtenga el atributo de "clase" del elemento

Similar al caso del atributo "flotante", los dos navegadores usan diferentes métodos de JavaScript para obtener este atributo.

Es decir, sintaxis:

 var myObject = document.getElementById ("Header"); var myattribute = myObject.getAttribute ("classname");

Sintaxis de Firefox:

 var myObject = document.getElementById ("Header"); var myattribute = myObject.getAttribute ("clase");

4. Obtenga el atributo "para" de la etiqueta de la etiqueta

Al igual que 3, hay diferentes sintaxis para usar JavaScript para obtener el atributo "para" de una etiqueta.

Es decir, sintaxis:

 var myObject = document.getElementById ("myLabel"); var myattribute = myObject.getAttribute ("htmlfor");

Sintaxis de Firefox:

 var myObject = document.getElementById ("myLabel"); var myattribute = myObject.getAttribute ("for");

La misma sintaxis también es cierta para el método SetAttribute.

5. Obtenga 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 generalmente se usa como parte de muchos procesos de eventos complejos, y solo se usa para describir las diferencias aquí. Cabe señalar que los resultados en IE son diferentes de los de Firefox, por lo que este método tiene algunos problemas. Por lo general, esta diferencia puede compensarse obteniendo la "posición de desplazamiento", pero ese es el tema de otro artículo.

Es decir, sintaxis:

 var mycursorPosition = [0, 0]; mycursorPosition [0] = event.clientx; mycursorPosition [1] = event.clienty;

Sintaxis de Firefox:

 var mycursorPosition = [0, 0]; mycursorPosition [0] = event.pagex; mycursorPosition [1] = event.pagey;

6. Obtenga el tamaño de la ventana o la ventana del navegador

A veces es necesario averiguar el tamaño del espacio de ventana efectivo del navegador, que generalmente es una "ventana".

Es decir, sintaxis:

 var mybrowsersize = [0, 0]; mybrowsersize [0] = document.documentelement.clientwidth; mybrowsersize [1] = document.documentelement.clientHeight;

Sintaxis de Firefox:

 var mybrowsersize = [0, 0]; mybrowsersize [0] = window.innerwidth; mybrowsersize [1] = window.innerheight;

7. Alfa transparente

Bueno, este no es en realidad un proyecto de sintaxis para JavaScript: la transparencia alfa se establece a través de CSS. Sin embargo, cuando el objeto se establece dentro y fuera a través de JavaScript, esto debe lograrse obteniendo la configuración alfa del CSS, que generalmente está dentro del bucle. Para cambiar el código CSS con el siguiente JavaScript:

Es decir, sintaxis:

 #myelement {filtro: alfa (opacidad = 50);}

Sintaxis de Firefox:

 #myelement {opacidad: 0.5;}

Para obtener estos valores usando JavaScript, debe usar un objeto de estilo:

Es decir, sintaxis:

 var myObject = document.getElementById ("myElement"); myobject.style.filter = "alfa (opacidad = 80)";

Sintaxis de Firefox:

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

Por supuesto, se ha mencionado que generalmente es cambiar la opcidad/alfa en el medio de un bucle para crear efectos de animación, pero este es un ejemplo simple, solo para describir claramente cómo se implementa el método.

Hay 7 puntos diferentes en la sintaxis de JavaScript en términos de JavaScript, espero que sea útil para el aprendizaje de todos.