IEとFirefoxブラウザでのJavaScriptの7つの違いと互換性の書き方まとめ_JavaScriptスキル

この記事では、著者が IE と Firefox の JavaScript の 7 つの違いを紹介します。
1. CSS の「float」値
特定の CSS 値にアクセスするための最も基本的な構文は次のとおりです。たとえば、キャメルケース表記を使用して値をコネクタに置き換えます。 , ID「header」を持つ

の背景色の値にアクセスするには、次の構文を使用します。
ただし、「float」という単語は JavaScript の予約語であるため、object.style.float を使用してアクセスすることはできません。
IE でこれを記述します。

document.getElementById("header").style.styleFloat = "left";
Firefox で次のように記述します:

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


2. 要素の推論スタイル
JavaScript は object.style.property 構文を使用して外部から CSS スタイルに簡単にアクセスして変更できますが、その構文には次のような制限があります。すでに設定されているインライン スタイル、または 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」と同様に、「class」は JavaScript の予約語です。ブラウザ コンテナでは、次の構文を使用して「クラス」にアクセスします。 IE では次のように記述します。
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Firefox では次のように記述します。 :

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
この構文は、setAttribute メソッドを使用する場合にも適用されます。

4.
タグの「for」にアクセスする

ポイント 3 で説明したように、 タグの「for」にアクセスするには、目に見えない構文の区別も使用する必要があります。 IE でこれを記述します:
var myObject = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("htmlFor");
Firefox でこれを記述します:

var = 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; Firefox で次のように記述します:

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

6. 表示領域とウィンドウのサイズを取得する必要があります。ブラウザの表示位置のサイズ。通常は「表示領域」と呼ばれます。
IE で次のように記述します。

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement ;
これを Firefox で記述します:
var myBrowserSize = [0, 0];
myBrowserSize[1] = window.innerHeight; >7. アルファ透明度

まあ、これは JavaScript の構文の問題ではなく、CSS から派生したアルファ透明度です。ただし、オブジェクトをフェードイン/フェードアウトする必要がある場合、これを実行するには、通常はループ内で CSS のアルファ透明度設定にアクセスする必要があります。変更する必要がある JavaScript コードは次のとおりです。
IE でこれを記述します:

#myElement { filter: alpha(opacity=50) }
Firefox でこれを記述します:

#myElement { opacity: 0.5; }
これを IE で記述します:

var myObject = document.getElementById("myElement"); myObject.style.filter = "alpha (opacity= 80)"; Firefox でこれを記述します:

var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
他に何か? 違う?
これは著者が自身の経験に基づいてまとめたものです (via: 7 JavaScript Differences Between Firefox & IE)。sofish はまだ JavaScript の初心者です。さらに違いがある場合は、問題を取り上げて共有し、一緒に学んでください。