Neste artigo, descreverei brevemente vários aspectos da sintaxe JavaScript que diferem 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
("header").style.borderBottom= "1px solid #ccc";
"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"
;
document.getElementById("header").style.cssFloat = "left"
;
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 myStyle = myComputedStyle.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 myAttribute = myObject.getAttribute("class");
4. Obtenha o atributo "for" do rótulo.
Assim como no item 3, também existem sintaxes diferentes para usar JavaScript para obter o atributo "for" do rótulo.
Sintaxe do IE:
var meuObjeto = document.getElementById("meuLabel");
var meuAtributo = myObject.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
Obter a posição do cursor de um elemento é raro e, se necessário, a sintaxe é diferente no IE e no Firefox. 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.
Sintaxe do IE:
var minhaPosiçãoCursor = [0, 0];
minhaPosiçãoCursor[0] = event.clientX;
myCursorPosition[1] = event.clientY
;
var minhaPosiçãoCursor = [0, 0];
minhaPosiçãoCursor[0] = event.pageX;
minhaPosiçãoCursor[1] = event.pageY;