7 Firefox と IE_html/css_WEB-ITnose の JavaScript の違い

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

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

1. CSS "float" プロパティ

特定のオブジェクトの特定の CSS プロパティを取得するための基本構文は object.style プロパティであり、ハイフンで囲まれたプロパティはラクダ表記に置き換えられます。たとえば、ID が「header」である div の背景色属性を取得するには、次の構文を使用する必要があります:

document.getElementById("header").style.borderBottom= "1px Solid #ccc";

しかし、「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");

Firefox 構文:

var myObject = document.getElementById("header");

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

3. 要素の "class" 属性を取得します

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

var myObject = document.getElementById("header");

var myAttribute = myObject.getAttribute("class");

IE 構文:

4. ラベル label の "for" 属性を取得します。 3と同様、JavaScriptを使用してラベルを取得します。 「for」属性も構文が異なります。

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("htmlFor");Firefox 構文:

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("for");

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

5. カーソル位置を取得する

IE 構文:

myCursorPosition[1] = events.clientY;

var myCursorPosition = [0, 0]; myCursorPosition[0] = events.clientX;

Firefox Graマール:

var myCursorPosition = [0, 0];

myCursorPosition[0] =event.pageX;

myCursorPosition[1] =event.pageY;

6. ウィンドウまたはブラウザ ウィンドウのサイズを取得します IE 構文:

場合によっては、通常は「ウィンドウ」と呼ばれるブラウザの有効ウィンドウ領域のサイズを確認する必要があります。

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

Firefox 構文:

myBrowserSize[1] = document.documentElement.clientHeight;

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

7。

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

IE 構文:

#myElement {

filter: alpha(opacity=50); }

Firefox 構文:

# myElement {

不透明度: 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 は通常、アニメーション効果を作成するためにループの途中で変更されますが、これはメソッドの実装方法を明確に説明するための単純な例です。