JavaScriptの長い迷惑なコードブロックを使用して特定のブラウザをターゲットにした期間は終了しましたが、単純なコードブロックとオブジェクト検出を使用して、ユーザーマシンで一部のコードが適切に機能することを確認する必要があります。
この記事では、Internet ExplorerとFirefoxの間のJavaScript構文の7つの異なる側面について簡単に説明します。
1。CSS「フロート」属性
特定のオブジェクトの特定のCSS属性を取得するための基本的な構文は、Object.Style属性であり、ハイフンを使用した属性はラクダの命名法に置き換える必要があります。たとえば、ID「ヘッダー」を備えた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 mystyle = myobject.currentstyle.backgroundcolor;
Firefox構文:
var myobject = document.getElementById( "header"); var mycomputedStyle = document.defaultView.getComputedStyle(Myobject、null); var mystyle = mycomputedStyle.backgroundColor;
3.要素の「クラス」属性を取得します
「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。ラベルタグの「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の結果とは異なるため、この方法にはいくつかの問題があることに注意する必要があります。通常、この違いは「スクロール位置」を取得することで補償できますが、それは別の記事の主題です。
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。アルファ透明
まあ、これは実際にはJavaScriptの構文プロジェクトではありません - アルファ透明性はCSSを介して設定されています。ただし、JavaScriptを介してオブジェクトがフェードインおよびフェードアウトするように設定されている場合、これは、一般的にループ内にあるCSSのアルファ設定を取得することで実現する必要があります。次のJavaScriptでCSSコードを変更するには:
IE構文:
#myelement {filter:alpha(ofacity = 50);}Firefox構文:
#myelement {不透明:0.5;}JavaScriptを使用してこれらの値を取得するには、スタイルオブジェクトを使用する必要があります。
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を変更してアニメーション効果を作成することが言及されていますが、これは簡単な例です。メソッドの実装方法を明確に説明するためだけです。
JavaScriptの観点からJavaScriptの構文には7つの異なるポイントがあります。すべての人の学習に役立つことを願っています。