JS에서 호환성 문제를 처리하는 방법

이 글은 주로 JS의 호환성 문제를 처리하는 방법을 공유합니다. 도움이 되기를 바랍니다.

1. out-of-line 스타일을 얻기 위한 currentStyle과 getCompulatedStyle 사이의 호환성 문제에 대해
우리는 js가 out-of-line 스타일을 얻어야 할 때 out-of-line 스타일을 얻을 수 없다는 것을 모두 알고 있습니다. -라인 스타일:
일반적으로 다음 두 가지 방법을 통해 라인 외부 스타일을 가져옵니다.
IE에서: currentStyle
Chrome, FF: getCompulatedStyle(op,false)
두 브라우저 모두와 호환됩니다.
if(op.currentStyle ){
                                                  + 라인 외부 스타일을 얻기 위한 함수를 캡슐화하려면: (하위 버전 IE6,7을 포함한 모든 브라우저와 호환 가능)
funtion getStyle(obj,name){
. If (obj.currenTStyle) {
/ / IE
Return obj.currenTtyle [이름];
} else {
// chrom, ff
reTurn getComputeDStyle (olj, false) [이름];
                ~                                                   

2 "인덱스"를 사용하여 문자열의 각 항목을 얻을 때 발생하는 호환성 문제에 대해:
문자열의 경우 유사한 첨자 인덱스를 통해 각 항목의 값을 얻는 방법도 있습니다.
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; 요소 노드
예: 모든 하위 노드 배경색이 빨간색이 되도록 UL의 모든 하위 노드를 가져옵니다. 노드 호환 방법:
var oUl=document.getElementById('ul');
for(var i=0;i if(oUl.childNodes[ i].nodeType==1){
oUl.childNodes[i].style.Background='red';
}
}
참고: 위의 childNodes로 인한 문제는 전혀 괜찮습니다. 대신 children 속성입니다.
children 속성: 텍스트 노드가 아닌 요소 노드만 얻음, 모든 브라우저와 호환됨,
위보다 사용하기 쉽기 때문에 일반적으로 자식 노드를 얻을 때 children 속성을 사용하는 것이 가장 좋습니다.
var oUl=document.getElementById('ul');
oUl.children.style.Background="red";




4. 첫 번째/마지막 요소 노드에서 발생하는 문제 --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.ground='red';
  }


5. 마우스 위치
                                                                                          ~                                               ev |

6. 두 개의 동일한 이벤트를 요소에 바인딩할 때 발생하는 호환성 문제에 대해: attachmentEvent/attachEventLister
이벤트 바인딩: (비호환성은 호환성을 위해 두 가지 조합이 필요합니다. if..else..)
사용됨 IE8 이하: attachmentEvent('이벤트 이름',fn);
FF, Chrome, IE9-10에서 사용됨: attachmentEventLister('이벤트 이름',fn,false);
여러 이벤트 바인딩이 하나의 호환 가능한 함수로 캡슐화됩니다. :
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8 이하
obj.attachEvent('on'+ev,fn)
ㅋㅋㅋ  myAddEvent(oBtn,'click',function (){
  경보(a);
});
myAddEvent(oBtn,'click',function(){
경보(b );
});

7. 스크롤바 거리를 구하는 문제에 대해

스크롤바 스크롤 거리를 구하는 경우:
IE, Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop

호환성 처리: var scrollTop=document.documentElement.scrollTop||document.body.scrollTop관련 권장 사항:
호환성 오류가 발생하기 쉬운 문제에 대한 요약 js

JavaScript의 호환성 성능에 대한 구체적인 분석
JavaScript 문자열 연산 방법 및 브라우저 호환성 예시에 대한 자세한 설명

위 내용은 JS에서 호환성 문제를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!