Firefox與IE的7個JavaScript差異，Firefoxjavascript差異

Firefox與IE的7個JavaScript差異，Firefoxjavascript差異

     作者註：本篇文章發表於2009.04.27，是一篇關於討論Javascript在IE6、IE7和FF2+、FF3.0之間的存在的問題的文章。

     儘管需要用冗長的JavaScript代碼去識別特定的瀏覽器的曆史已經過去，但是，偶爾有必要用一段簡單的JavaScript代碼和對象檢測來確保特定的JavaScript代碼塊能夠在使用者的機器上運行。在這篇文章中，我將會從7個方面概述IE和FF在JavaScript文法上的差異。

    1、CSS的“float”屬性

          擷取給定對象的特定 CSS 屬性的基本文法是 object.style.property，有連字號的屬性要用駱駝命名法來代替，例如，擷取一個 ID 為 “header” 的 div 的 background-color 屬性，文法如下：

    document.getElementById("header").style.backgroundColor= "#ccc";  

          但是自從JavaScript將float作為保留字，我們不能用object.style.float文法來擷取該屬性。在IE和FF中，我們可以這樣做：

           IE文法：

    document.getElementById("header").style.styleFloat = "left";  

           FF文法：

    document.getElementById("header").style.cssFloat = "left";  

    2、元素的計算樣式

          通過使用上述的 object.style.property， JavaScript 可以很容易的擷取和修改對象的設定 CSS 樣式。但是這一文法的局限在於，它只能取得內聯在 HTML 裡的樣式，或者直接使用 JavaScript 設定的樣式。style 對象不能擷取使用外部樣式表設定的樣式。為了擷取對象的”計算樣式”，我們使用以下代碼：

          IE文法：

    var myObject = document.getElementById("header");      var myStyle = myObject.currentStyle.backgroundColor;  

          FF文法：

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

    3、擷取元素的class屬性

          類似於”float”屬性，IE和FF用均可以用JavaScript的getAttribute方法，但是文法略有差別：

          IE文法：

var myObject = document.getElementById("header");  var myAttribute = myObject.getAttribute("className");

          FF文法：

var myObject = document.getElementById("header");  var myAttribute = myObject.getAttribute("class"); 

          同樣的差異也適用於setAttribute方法。

     4、擷取label標籤的for屬性

           與上述類似，我們有不同的JavaScript文法來擷取label標籤的for屬性。

           IE文法：

    var myObject = document.getElementById("myLabel");      var myAttribute = myObject.getAttribute("htmlFor");  

           FF文法：

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

       5、擷取游標位置

             擷取元素的游標位置比較少見，如果需要這麼做，IE 和 Firefox 的文法也是不同的。這個範例程式碼是相當基礎的，一般用作許多複雜事件處理的一部分，這裡僅用來描述差異。需要注意的是，IE 中的結果和 Firefox 中是不同的，因此這個方法有些問題。通常，這個差異可以通過擷取 “滾動位置” 來補償 － 但那是另外一篇文章的課題了。

             IE文法：

    var myCursorPosition = [0, 0];      myCursorPosition[0] = event.clientX;      myCursorPosition[1] = event.clientY;  

            FF文法：

    var myCursorPosition = [0, 0];      myCursorPosition[0] = event.pageX;      myCursorPosition[1] = event.pageY;  

       6、擷取視窗或瀏覽器視窗的大小

            有時需要找出瀏覽器的有效視窗空間的尺寸，一般成為”視窗”。

            IE文法：

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

           FF文法：

    var myBrowserSize = [0, 0];      myBrowserSize[0] = window.innerWidth;      myBrowserSize[1] = window.innerHeight;  

      7、Alpha透明處理

            這不是JavaScript的文法問題，alpha transparency是通過css設定的。但是當對象通過 JavaScript 設定為淡入淡出時，這就需要通過擷取 CSS 的 alpha 設定，在迴圈內部來實現。要通過以下 JavaScript 來改變 CSS 代碼。

            IE文法：

    #myElement {          filter: alpha(opacity=50);      }  

           FF文法：

    #myElement {          opacity: 0.5;      }  

            為了讓JavaScript擷取這些值，需要使用style對象。

            IE文法：

    var myObject = document.getElementById("myElement");      myObject.style.filter = "alpha(opacity=80)";  

           FF文法：

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

           當然，正如提到的，需要通過內部迴圈來修改alpha/opacity值來實現動畫效果，但這隻是一個用來說用它的工作原理的簡單例子。

        還有其他差異嗎？

        這些差異是我個人在開發或者研究中碰到的，當然還有其他方面的差異，如果你認為我遺漏了某一個重要的方面，可以留下你的評論，我會去更新這份差異列表，或者在發表一篇blog。

            原文連結：http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/#comment-624

            

ie與Firefox瀏覽器的不同是因為javascript

有一些javascript在Firefox中相容不了，此外，ie6，ie7跟ie8也不太一樣
 
有關javascript在ie與firefox中的問題

你這個代碼裡面有幾處js瀏覽器安全色問題：1. Firefox不只持document.all 方法。改為：document.getElementById或者document.getElementByName擷取當前對象 2. 在Firefox下沒有style.pixelTop和style.pixelLeft這個屬性取而代之的是style.top和style.left。但是你要注意style.left(style.top)返回的是有單位的值例如：假設單位為（px) 則擷取left 的方法為：parseInt(object.style.left, 10)