Diferenças na sintaxe JavaScript entre IE e Firefox

Embora o período no histórico do JavaScript de usar blocos de código longos e irritantes para segmentar navegadores específicos tenha terminado, ainda é necessário usar ocasionalmente blocos de código simples e detecção de objetos para garantir que alguns código funcionem corretamente nas máquinas de usuário.

Neste artigo, descreverei brevemente os 7 aspectos diferentes da sintaxe JavaScript entre o Internet Explorer e o Firefox.

1. Atributo "flutuante" CSS

A sintaxe básica para obter um atributo CSS específico de um determinado objeto é o objeto. Atributo do estilo, e os atributos com hífen devem ser substituídos pela nomenclatura do camelo. Por exemplo, para obter a propriedade cor de fundo de uma div com ID "cabeçalho", precisamos usar a seguinte sintaxe:

A cópia do código é a seguinte: document.getElementById ("cabeçalho"). Style.borderbottom = "1px sólido #ccc";

No entanto, como "Float" é uma palavra reservada para JavaScript, não podemos usar objeto.style.float para obter o atributo "float". Aqui está como o usamos em dois navegadores:

Ou seja, sintaxe:

A cópia do código é a seguinte: document.getElementById ("cabeçalho"). Style.stylefloat = "esquerda";

Sintaxe do Firefox:

A cópia do código é a seguinte: document.getElementById ("cabeçalho"). Style.cssfloat = "esquerda";

2. Estilo de cálculo de elementos

Ao usar o objeto acima.style.property, o JavaScript pode obter facilmente e modificar o estilo CSS do objeto. No entanto, a limitação dessa sintaxe é que ela só pode obter estilos embutidos no HTML ou usar diretamente JavaScript para definir estilos. O objeto de estilo não pode definir estilos usando uma folha de estilo externa. Para obter o "estilo calculado" do objeto, usamos o seguinte código:

Ou seja, sintaxe:

 var myObject = document.getElementById ("cabeçalho"); var mystyle = myObject.currentStyle.backgroundColor;

Sintaxe do Firefox:

 var myObject = document.getElementById ("cabeçalho"); var myComputedStyle = document.defaultView.getComputedStyle (myObject, null); var mystyle = myComputedStyle.backgroundColor;

3. Obtenha o atributo "classe" do elemento

Semelhante ao caso do atributo "Float", os dois navegadores usam diferentes métodos JavaScript para obter esse atributo.

Ou seja, sintaxe:

 var myObject = document.getElementById ("cabeçalho"); var myAttribute = myObject.getAttribute ("className");

Sintaxe do Firefox:

 var myObject = document.getElementById ("cabeçalho"); var myAttribute = myObject.getAttribute ("classe");

4. Obtenha o atributo "for" da etiqueta

Como 3, existem diferentes sintaxes para usar o JavaScript para obter o atributo "para" de um rótulo.

Ou seja, sintaxe:

 var myObject = document.getElementById ("mylabel"); var myAttribute = myObject.getAttribute ("htmlfor");

Sintaxe do Firefox:

 var myObject = document.getElementById ("mylabel"); var myAttribute = myObject.getAttribute ("para");

A mesma sintaxe também é verdadeira para o método setAttribute.

5. Obtenha a posição do cursor

É raro obter a posição do cursor de um elemento. Se você precisar fazer isso, a sintaxe do IE e do Firefox também é diferente. Esse código de amostra é bastante básico e geralmente é usado como parte de muitos processos complexos de eventos e é usado apenas para descrever as diferenças aqui. Deve -se notar que os resultados do IE são diferentes dos do Firefox, portanto esse método tem alguns problemas. Geralmente, essa diferença pode ser compensada pela "posição de rolagem" - mas esse é o assunto de outro artigo.

Ou seja, sintaxe:

 var mycursorposion = [0, 0]; mycursorposition [0] = event.clientX; mycursorposition [1] = event.clienty;

Sintaxe do Firefox:

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

6. Obtenha o tamanho da janela ou janela do navegador

Às vezes, é necessário descobrir o tamanho do espaço efetivo da janela do navegador, que geralmente é uma "janela".

Ou seja, sintaxe:

 var myBrowSerize = [0, 0]; mybrowSize [0] = document.documentElement.clientWidth; myBrowserSize [1] = document.documentElement.clientHeight;

Sintaxe do Firefox:

 var myBrowSaSee = [0, 0]; mybrowSize [0] = window.innerwidth; mybrowSize [1] = window.innerHeight;

7. Alpha transparente

Bem, este não é realmente um projeto de sintaxe para JavaScript - a transparência alfa é definida através do CSS. No entanto, quando o objeto é definido para entrar e sair através do JavaScript, isso precisa ser alcançado com a obtenção das configurações alfa do CSS, que geralmente está dentro do loop. Para alterar o código CSS com o seguinte JavaScript:

Ou seja, sintaxe:

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

Sintaxe do Firefox:

 #MyElement {Opacity: 0.5;}

Para obter esses valores usando JavaScript, você precisa usar um objeto de estilo:

Ou seja, sintaxe:

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

Sintaxe do Firefox:

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

Obviamente, foi mencionado que geralmente é alterar a opcity/alfa no meio de um loop para criar efeitos de animação, mas este é um exemplo simples, apenas para descrever claramente como o método é implementado.

Existem 7 pontos diferentes na sintaxe JavaScript em termos de JavaScript, espero que seja útil para o aprendizado de todos.