IE における Javascript のさまざまなパフォーマンスと FireFox_javascript スキルの簡単な分析

1.document.formName.item("itemName") 問題
説明: IE では document.formName.item("itemName") または Firefox では document.formName.elements["elementName"] を使用できます。
解決策: document.formName.elements["elementName"] を一律に使用します。
2. コレクション クラス オブジェクトの問題
説明: IE では、コレクション オブジェクトを取得するには () または [] を使用できます。Firefox では、コレクション オブジェクトを取得するには [] のみを使用します。
3.
注: IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得することも、getAttribute() を使用してカスタム属性を取得することもできます。Firefox では、getAttribute() を使用してカスタム属性を取得することしかできません。 🎜>解決策: getAttribute() を介してカスタム属性を取得する統合
4.eval("idName") の問題
説明: IE では、eval("idName") または getElementById("idName") を使用して、 ID を idName HTML オブジェクトとして取得します。Firefox では、idName を持つ HTML オブジェクトを取得するには getElementById("idName") のみを使用します。
解決策: getElementById("idName") を一律に使用して、HTML オブジェクトを取得します。
5. 変数名が HTML オブジェクトの ID と同じである問題
注: IE では、HTML オブジェクトの ID を下位の変数名として直接使用できます。 Firefox では、HTML オブジェクトの ID を HTML オブジェクト ID と同じように使用できます。
解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、変数を宣言するときは常に var を追加してください。
7.Input.type 属性の問題
説明: IE では input.type 属性は読み取り専用ですが、Firefox では input.type 属性は読み取り/書き込み可能です
9.event.x およびイベント。 y の問題
注: IE では、even オブジェクトには x、y 属性がありますが、pageX、pageY 属性はありません。Firefox では、even オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。
解決策: IE のevent.x または Firefox のevent.pageX を置き換えるには、mX(mX =event.x ?event.x :event.pageX;) を使用します。
10.event.srcElement の問題
説明: IE では、イベント オブジェクトには srcElement 属性がありますが、target 属性はありません。Firefox では、イベント オブジェクトには target 属性がありますが、srcElement 属性はありません。
解決策: obj (obj =event.srcElement ?event.srcElement :event.target;)
13.フレームの問題
次のフレームを例に挙げます:

(1) フレーム オブジェクトにアクセスします。
IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。
Firefox: フレーム オブジェクトにアクセスするには、window.frameName のみを使用します。
さらに、IE と Firefox の両方で window.document.getElementById("frameId") を使用して、このフレーム オブジェクトにアクセスできます。
(2) フレーム コンテンツを切り替えます。 IE と Firefox の両方で使用される window.document.getElementById("testFrame").src = "xxx.html" または window.frameName.location = "xxx.html" を使用してフレームのコンテンツを切り替えます。フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、 frme のparentを使用して親ウィンドウにアクセスできます。例:parent.document.form1.filename.value="Aqing";
14.body の問題
Firefox の本体はブラウザによって完全に読み取られる前に存在しますが、IE の本体は本体タグによって読み取られます。ブラウザによって完全に読み取られるまで存在しません。
例:
Firefox:




コードをコピーします

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

document.body.onclick = function(evt){

evt = evt;
alert(evt>)


IE&Firefox: >



コードをコピーします

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

; document.body.onclick = function(evt){ evt = evt || } script>

15. イベント委任メソッド
IE: document.body.onload = inject; // この
の前に関数 inject() が実装されています。 Firefox: document.body.onload = inject();
標準は次のとおりだと言う人もいます:

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


document.body.onload=new Function('inject()');


16. firefox と IE の親要素 (parentElement) の違い
IE: obj.parentElement
firefox: obj.parentNode
解決策: firefox も IE も DOM をサポートしているため、obj が使用されます。
17.innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。

コードをコピーします。 > コードは次のとおりです:

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element' ). innerText = "私のテキスト"; else{
document.getElementById('element').textContent = "私のテキスト";


18. FireFox ステートメント obj.style.height = imgObj.height は無効です
解決策:

コードをコピーします

コードは次のとおりです以下のように: obj.style.height = imgObj.height 'px';

19. IE、Firefox、およびその他のブラウザーでは、テーブル タグの操作が異なります。 IE テーブルおよび tr への innerHTML 値の割り当ては許可されていません。js を使用して tr を追加する場合、appendChile メソッドは機能しません。
解決策:

コードをコピー

コードは次のとおりです: //1 つ追加しますテーブルへの空の行: var row = otable.insertRow(-1);

var cell = document.createElement("td");

cell.innerHTML = " "; className = " XXXX";
row.appendChild(cell);


20. パディングの問題
padding 5px 4px 3px 1px を
に変更する必要があります。 ;padding-top:5px;padding-bottom:3px;padding-left:1px;
21. ul、ol などのリストのインデントを削除する場合は、次のように記述します。 : list-style:none; margin:0px ;padding:0px;

margin 属性は IE で有効であり、padding 属性は FireFox
22 で有効です。 DXImageTransform.Microsoft.Alpha(style=0,opacity=60) 。
FF:不透明度:0.6。
23. CSS 角丸
IE: 角丸はサポートされていません。
FF: -moz-border-radius:4px、または -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border-radius- 右下:4px;。
24. CSS 二重線バンプボーダー
IE: border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 ホワイト;-moz-border-left-colors: #d4d0c8 ホワイト;-moz-border-right-colors:#404040 #808080;-moz-border-ボトムカラー:#404040 #808080;
25． IE は document.all をサポートしますが、Firefox は
をサポートしません。 document.all の代わりに次の 3 つのタグのいずれかを使用します。
getElementsByTagName("tagName") すべてのタグ要素のコレクションを取得します。
getElementById("idName " ) id
getElementsByName("Name") で要素を取得できますattribute
26. Firefox での innerHTML の使い方




コードをコピーします


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

document.all.online . innerHTML; //このメソッドは IE で使用できますが、標準のメソッドではありません document.getElementById("online").innerHTML; //この方法で、Firefox は innerHTML を使用できます

27 、 eval() および window.execScript() はスクリプトを実行します

IE と firerox は両方とも eval() をサポートしますが、Firefox は window.execScript() をサポートしません
解決策: eval() を一律に使用します
28 . イベント処理 関数書き換え
解決策: (例): ドキュメントのonclick()を書き換える場合は、 document.onclick = function(){…} を使用します。