JS の互換性の問題に対処する方法

この記事では主に JS の互換性の問題に対処する方法について説明します。お役に立てれば幸いです。

1. 行外のスタイルを取得するための currentStyle と getComputedStyle の間の互換性の問題について
行外のスタイルを取得する必要がある場合、js が行外のスタイルを取得できないことは誰もが知っています。 -line スタイル:
通常、次の 2 つの方法で行外スタイルを取得します:
IE の場合: currentStyle
Chrome、FF: getComputedStyle(op,false)
両方のブラウザと互換性があります:
if(op.currentStyle ){
aler(op.currentStyle.width); }
*注: 多くの互換性の問題は解決されつつあります。記述するときは、if..else..を使用してください
行外のスタイルを取得する関数をカプセル化するには: (下位バージョンの IE6、7 を含むすべてのブラウザーと互換性があります)
function getStyle(obj,name){
. If (obj.currenTtyle) {
/ /ie
obj.currentes of [name];

2. "index" を使用して文字列の各項目を取得するときに発生する互換性の問題について:
文字列の場合、同様の添字インデックスを使用して各項目の値を取得する方法もあります。
var str="abcde";
aletr(str[1]);
ただし、それより低いバージョンのブラウザ IE6,7 には互換性がありません
互換性メソッド: str.charAt(i) //すべてのブラウザ すべて互換性あり
var str="abcde";
for(var i=0;i
alert(str.charAt(i)); //文字列を元に戻します
}


3. childNodes が DOM で子ノードを取得するときに発生する互換性の問題について
childNodes: 子ノードを取得する場合、
--IE6-8 : 取得された要素ノードです、通常です
--上位バージョンのブラウザ: ただし、テキスト ノードと要素ノードが含まれます (通常ではありません)
解決策: ノードのタイプである nodeType を使用して判断します
--nodeType= 3-& gt; テキスト ノード
-nodeType = 1-& gt; 要素ノード
例: すべてのサブノードの背景色が赤になるようにします
ノード互換メソッド:
var oUl=document.getElementById('ul');
for(var i=0;i
if(oUl.childNodes[注: 上記の childNodes によって引き起こされる問題は完全に問題ありません。代わりに、children 属性が使用されます。
Children 属性: テキスト ノードではなく要素ノードのみを取得します。すべてのブラウザーと互換性があります。
上記よりも使いやすいため、通常、子ノードを取得する場合は、children 属性を使用するのが最適です。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";

4. firstChild、lastChild などの使用については、最初のもの /最後の要素ノードから生じる問題

-- IE6-8 では、firstChild、lastChild、nextSibling、previousSibling、最初の要素ノードを取得します
(上位バージョンのブラウザ IE9+、FF、Chrome には互換性がありません。取得される空のテキスト ノード)


-- 上位バージョンのブラウザーの場合: firstElementChild、lastElementChild、nextElementSibling、previousElementSibling (下位バージョンのブラウザ IE6-8 は非対応)
-- 互換性のある記述方法: ul の最初の要素ノードを見つけ、その背景色を赤に変更します
var oUl=document.getElementById('ul' ; //IE6-8
oUl.firstChild.style.background='red';
}


5. イベントオブジェクト使用時の互換性問題について
例: Getマウスの位置ev | |

6. 2 つの同一のイベントを要素にバインドするときに発生する互換性の問題について:attachEvent/attachEventLister
イベント バインディング: (互換性を保つには、if..else.. の 2 つの組み合わせが必要です)
を使用IE8 以降:attachEvent('イベント名',fn);
FF、Chrome、IE9-10 で使用:attachEventLister('イベント名',fn,false);
複数のイベント バインディングが 1 つの互換性のある関数にカプセル化されます:
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8 以下
obj.attachEvent('on'+ev,fn); ️
myAddEvent(oBtn,'click',function (){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b) );
});

7. スクロールバーのスクロール距離を取得する問題について
スクロールバーのスクロール距離を取得する場合:
IE、Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop

互換性処理: varscrollTop=document.documentElement.scrollTop||document.body.scrollTop
関連する推奨事項:
互換性エラーが発生しやすい問題の概要js
JavaScriptの互換性性能を具体的に分析
JavaScriptの文字列操作方法とブラウザの互換性例を詳しく解説

以上がJS の互換性の問題に対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。