IE と Firefox の間で JavaScript の 7 つの異なる構文を共有_javascript スキル

この記事では、著者が IE と Firefox の 7 つの異なる JavaScript 構文を紹介します。

1. CSS "float" 値

特定の CSS 値にアクセスするための最も基本的な構文は次のとおりです。 object.style.property は値を Connectors に置き換えます。たとえば、ID「header」を持つ

の背景色の値にアクセスするには、次の構文を使用します:

document.getElementById("header").style.backgroundColor= "#ccc " ;

しかし、「float」という単語は JavaScript の予約語であるため、object.style.float を使用してアクセスすることはできません。ここでは、2 つのブラウザーでこれを行うことができます:

Write IE では次のようになります:

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

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

Firefox で次のように記述します:

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

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

2。 element
JavaScript は object.style.property 構文を使用して、CSS スタイルに外部から簡単にアクセスして変更できますが、これらの構文では既に設定されているインライン スタイル、または 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;要素の「class」にアクセスする
「float」と同様、「class」も JavaScript の予約語です。これら 2 つのブラウザでは、次の構文を使用して「class」にアクセスします。

IE でこれを記述します:

コードをコピーします

コードは次のとおりです: var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("className");

Firefox で次のように記述します。

コードをコピーします

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

var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("class"); この構文は、 の "for" メソッドを使用しても適用されます。ポイント 3 で述べたように、 タグの「for」にアクセスするには、目に見えない構文上の区別も使用する必要があります。

IE でこれを記述します。

コードをコピーします


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


var myObject = document.getElementById("myLabel"); myAttribute = myObject.getAttribute("htmlFor");

Firefox で次のように記述します:

コードをコピーします

コードは次のとおりです:

var = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
5. マウス ポインターの位置を取得する
マウス ポインターの位置を計算することはあまり一般的ではないかもしれませんが、必要な場合は、IE と Firefox では構文が異なります。ここに書かれたコードは最も基本的なものであるか、複雑なイベント処理の特定の部分である可能性があります。しかし、それらは類似点と相違点を説明することができます。同時に、IE の結果は Firefox よりも大きく異なること、およびこの方法自体にバグがあることも指摘しなければなりません。通常、この違いは「ドラッグ位置」で補うことができますが、それは別のトピックの記事です :)

IE で次のように記述します:

コピーcode コードは次のとおりです。 [1] = events.clientY;

Firefox で次のように記述します:

コードをコピーします

var myCursorPosition = [0, 0]; myCursorPosition[0] = events.pageX; myCursorPosition[1] = events.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; 7. これは違います。これは JavaScript 構文の問題ではなく、CSS のアルファ透明度に起因します。ただし、オブジェクトをフェードイン/フェードアウトする必要がある場合、これを実行するには、通常はループ内で CSS のアルファ透明度設定にアクセスする必要があります。変更する必要がある JavaScript コードは次のとおりです。 IE の :

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

Firefox でこれを作成します。 :

#myElement { opacity: 0.5; }

IE で次のように記述します:




コードをコピー


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


var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";

Firefox でこれを記述します: コードをコピーします

コードは次のとおりです:


var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。