特定のブラウザーをターゲットにするために長くて退屈なコード ブロックを使用する JavaScript の歴史の時代は終わりましたが、ユーザーのマシン上で一部のコードが正しく動作することを確認するには、単純なコード ブロックとオブジェクト検出を時折使用する必要があります。
この記事では、Internet Explorer と Firefox の間で JavaScript 構文が異なる 7 つの点について概説します。
1. CSSの「float」プロパティ
特定のオブジェクトの特定の CSS プロパティを取得するための基本構文は object.style プロパティであり、ハイフンでつながれたプロパティでは代わりにラクダ表記が使用されます。たとえば、ID が「header」である div の背景色属性を取得するには、次の構文を使用する必要があります。
document.getElementById("ヘッダー").style.borderBottom= "1px ソリッド #ccc";
ただし、「float」は JavaScript の予約語であるため、object.style.float を使用して「float」属性を取得することはできません。両方のブラウザでの使用方法は次のとおりです。
IE 構文:
document.getElementById("ヘッダー").style.styleFloat = "左";
Firefox の構文:
document.getElementById("ヘッダー").style.cssFloat = "左";
2. 要素の計算形式
上記の object.style.property を使用すると、JavaScript はオブジェクトに設定されている CSS スタイルを簡単に取得および変更できます。ただし、この構文の制限は、HTML 内のインライン スタイル、または JavaScript を使用して直接設定されたスタイルのみを取得できることです。スタイル オブジェクトは、外部スタイル シートを使用して設定されたスタイルを取得できません。オブジェクトの「計算されたスタイル」を取得するには、次のコードを使用します。
IE 構文:
var myObject = document.getElementById("ヘッダー");
var myStyle = myObject.currentStyle.backgroundColor;
Firefox の構文:
var myObject = document.getElementById("ヘッダー");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. 要素の「class」属性を取得する
「float」属性の場合と同様に、2 つのブラウザは異なる JavaScript メソッドを使用してこの属性を取得します。
IE 構文:
var myObject = document.getElementById("ヘッダー");
var myAttribute = myObject.getAttribute("className");
Firefox の構文:
var myObject = document.getElementById("ヘッダー");
var myAttribute = myObject.getAttribute("クラス");
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 での結果とは異なるため、この方法にはいくつかの問題があることに注意してください。多くの場合、この違いは「スクロール位置」を取得することで補正できますが、それについては別の記事で説明します。