7 FF と IE の JavaScript の違い

JavaScript が特定のブラウザーをターゲットにするために長くて煩わしいコード ブロックを使用する歴史的な時代は終わりましたが、ユーザーのマシン上で一部のコードが適切に動作することを確認するために、単純なコード ブロックとオブジェクト検出を時折使用することは依然として必要です。

この記事では、Internet Explorer と Firefox の間の JavaScript 構文の 7 つの側面について簡単に説明します。

1. CSS "float" プロパティ
特定のオブジェクトの特定の CSS プロパティを取得するための基本構文は object.style プロパティであり、ハイフンでつながれたプロパティは Camel 命名法を使用して置き換えます。 。たとえば、ID「header」を持つ p の背景色属性を取得するには、次の構文を使用する必要があります。
しかし、「float」は JavaScript の予約語であるため、object.style.float を使用して「float」属性を取得することはできません。以下は 2 つのブラウザで使用するメソッドです:


IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

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

2. 要素の計算されたスタイル
上記の object.style.property を使用することで、JavaScript はオブジェクトに設定されている CSS スタイルを簡単に取得および変更できます。ただし、この構文の制限は、HTML 内のインライン スタイル、または JavaScript を使用して直接設定されたスタイルのみを取得できることです。スタイル オブジェクトは、外部スタイル シートを使用して設定されたスタイルを取得できません。オブジェクトの「計算されたスタイル」を取得するには、次のコードを使用します:

IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

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

3.要素の「class」属性を取得します 「float」属性の場合と同様に、2 つのブラウザはこの属性を取得するために異なる JavaScript メソッドを使用します。


IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです。

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

4. ラベルの "for" 属性を取得します。
と同じです。 3、JavaScript を使用してラベルを取得します。 「for」属性にも別の構文があります。

IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

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

同じ構文が setAttribute メソッドにも使用されます。


5. カーソル位置の取得
これを行う必要がある場合、IE と Firefox の構文も異なります。このサンプル コードはかなり基本的なもので、通常は多くの複雑なイベント ハンドラーの一部として使用され、ここでは違いを説明するためにのみ使用されます。 IE での結果は Firefox での結果とは異なるため、このアプローチにはいくつかの問題があることに注意してください。通常、この違いは「スクロール位置」を取得することで補正できますが、それについては別の記事で説明します。

IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

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

6. ウィンドウまたはブラウザ ウィンドウのサイズを取得します。 場合によっては、ブラウザの有効ウィンドウ領域のサイズ。通常は「Windows」になります。


IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

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

7. アルファ透明度
これは実際には JavaScript 構文ではありません。 item - アルファ透明度は CSS を通じて設定します。ただし、オブジェクトが JavaScript を介してフェードするように設定されている場合、これは、通常はループ内で CSS アルファ設定を取得することによって実現する必要があります。次の JavaScript を通じて CSS コードを変更するには:
IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

#myElement { 
opacity: 0.5; 
}

JavaScript を使用してこれらの値を取得するには、スタイル オブジェクトを使用する必要があります:


IE 構文:

コードは次のとおりです:

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

Firefox 構文:

コードは次のとおりです:

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

もちろん、すでに述べたように、opcity/alpha は通常、アニメーション効果を作成するためにループの途中で変更されますが、これは単純です。この例は、メソッドの実装方法を明確に説明するためのものです。