ホームページ >ウェブフロントエンド >htmlチュートリアル >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"); |
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");
4. ラベル label の "for" 属性を取得します。 3と同様、JavaScriptを使用してラベルを取得します。 「for」属性も構文が異なります。 |
|
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
同じ構文が setAtrribute メソッドにも使用されます。
5. カーソル位置を取得する |
IE 構文:
var myCursorPosition = [0, 0]; myCursorPosition[0] = events.clientX; | myCursorPosition[1] = events.clientY;
Firefox Graマール:
var myCursorPosition = [0, 0];
myCursorPosition[0] =event.pageX;myCursorPosition[1] =event.pageY;
場合によっては、通常は「ウィンドウ」と呼ばれるブラウザの有効ウィンドウ領域のサイズを確認する必要があります。 |
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 構文:
filter: alpha(opacity=50); } |
不透明度: 0.5; } |
IE 構文:
myObject.style.filter = "alpha(opacity=80)"; |
myObject.style.opacity = "0.5"; |