この記事では、Internet Explorer と Firefox で異なる JavaScript 構文のいくつかの側面について簡単に説明します。
1. CSSの「float」プロパティ
特定のオブジェクトの特定の CSS プロパティを取得するための基本構文は object.style プロパティであり、ハイフンでつながれたプロパティでは代わりにラクダ表記が使用されます。たとえば、ID が「header」の div の背景色属性を取得するには、次の構文を使用する必要があります。
document.getElementById("header").style.borderBottom= "1px Solid #ccc"
; 「float」は JavaScript の予約語であるため、object.style.float を使用して「float」属性を取得することはできません。両方のブラウザでの使用方法は次のとおりです。
IE 構文:
document.getElementById("header").style.styleFloat = "left"
;
document.getElementById("header").style.cssFloat = "left"
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("class");
4. ラベル label の「for」属性を取得します。
3 と同様、JavaScript を使用してラベルの「for」属性を取得するためのさまざまな構文もあります。
IE 構文:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor")
;
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
setAttribute メソッドにも同じ構文が使用されます。
5. カーソル位置の取得
要素のカーソル位置を取得することはまれで、必要な場合は、IE と Firefox では構文が異なります。このサンプル コードはかなり基本的なもので、通常は多くの複雑なイベント ハンドラーの一部として使用され、違いを説明するためにのみ使用されます。 IE での結果は Firefox での結果とは異なるため、この方法にはいくつかの問題があることに注意してください。多くの場合、この違いは「スクロール位置」を取得することで補正できますが、それについては別の記事で説明します。
IE 構文:
var myCursorPosition = [0, 0];
myCursorPosition[0] = イベント.clientX;
myCursorPosition[1] = events.clientY;
Firefox の構文:
var myCursorPosition = [0, 0];
myCursorPosition[0] = イベント.ページX;
myCursorPosition[1] = イベント.ページY;