Embora os dias da história do JavaScript de usar blocos de código longos e enfadonhos para atingir navegadores específicos tenham acabado, ainda é necessário usar ocasionalmente alguns blocos de código simples e detecção de objetos para garantir que algum código funcione corretamente na máquina do usuário.
Neste artigo, descreverei 7 maneiras pelas quais a sintaxe do JavaScript difere entre o Internet Explorer e o Firefox.
1. Propriedade “float” do CSS
A sintaxe básica para obter uma propriedade CSS específica de um determinado objeto é a propriedade object.style, e as propriedades hifenizadas usam a notação camel. Por exemplo, para obter o atributo background-color de uma div com o ID “header”, precisamos usar a seguinte sintaxe:
document.getElementById("cabeçalho").style.borderBottom= "1px sólido #ccc";
Mas como “float” é uma palavra reservada em JavaScript, não podemos usar object.style.float para obter o atributo “float”. Veja como o usamos em ambos os navegadores:
Sintaxe do IE:
document.getElementById("cabeçalho").style.styleFloat = "esquerda";
Sintaxe do Firefox:
document.getElementById("cabeçalho").style.cssFloat = "esquerda";
2. Estilo de cálculo dos elementos
Usando o object.style.property acima, o JavaScript pode facilmente obter e modificar o estilo CSS definido do objeto. Mas a limitação desta sintaxe é que ela só pode obter estilos embutidos em HTML ou estilos definidos diretamente usando JavaScript. O objeto de estilo não pode obter estilos definidos usando folhas de estilo externas. Para obter o “estilo calculado” de um objeto usamos o seguinte código:
Sintaxe do IE:
var meuObjeto = document.getElementById("cabeçalho");
var meuEstilo = meuObject.currentStyle.backgroundColor;
Sintaxe do Firefox:
var meuObjeto = document.getElementById("cabeçalho");
var meuComputedStyle = document.defaultView.getComputedStyle(meuObject, null);
var meuEstilo = meuEstiloComputado.backgroundColor;
3. Obtenha o atributo “class” do elemento
Semelhante ao caso do atributo "float", os dois navegadores usam métodos JavaScript diferentes para obter este atributo.
Sintaxe do IE:
var meuObjeto = document.getElementById("cabeçalho");
var meuAtributo = meuObjeto.getAttribute("className");
Sintaxe do Firefox:
var meuObjeto = document.getElementById("cabeçalho");
var meuAtributo = meuObjeto.getAttribute("classe");
4. Obter o atributo "for" do rótulo
é o mesmo que 3. Usar JavaScript para obter o atributo "for" do rótulo também possui sintaxe diferente.
Sintaxe do IE:
var meuObjeto = document.getElementById("meuLabel");
var meuAtributo = meuObjeto.getAttribute("htmlFor");
Sintaxe do Firefox:
var meuObjeto = document.getElementById("meuLabel");
var myAttribute = myObject.getAttribute("for");
A mesma sintaxe é usada para o método setAtrribute.
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. Este código de exemplo é bastante básico e normalmente é usado como parte de muitos manipuladores de eventos complexos e é usado apenas para descrever as diferenças. Deve-se notar que os resultados no IE são diferentes daqueles no Firefox, portanto existem alguns problemas com este método. Muitas vezes, essa diferença pode ser compensada obtendo a "posição de rolagem" - mas isso é assunto para outro artigo.