IE と Firefox の JavaScript 構文の違い_JavaScript のヒント

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

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

1. CSS「float」属性

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

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

document.getElementById("header").style.borderBottom = "1px ソリッド #ccc";

しかし、「float」は JavaScript の予約語であるため、object.style.float を使用して「float」属性を取得することはできません。 2 つのブラウザでこれを使用する方法は次のとおりです:

IE 構文:

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

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

Firefox 構文:

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

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

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. label タグの 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");

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

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. ウィンドウまたはブラウザウィンドウのサイズを取得します

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

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. Alpha 透明

嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS 的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码：

IE 语法：

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

Firefox 语法：

 #myElement {
opacity: 0.5;
}

要使用 JavaScript 获取这些值，需要使用 style 对象：

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，来创建动画效果，但这这是个简单的例子，只是为了明白地描述方法是如何实现地。

7个方面在JavaScript语法上不同的点，希望对大家的学习有所帮助。