IE와 Firefox 브라우저에서 JavaScript의 7가지 차이점과 호환성 작성 방법 요약_Javascript 팁

의 배경색 값에 액세스하려면 다음 구문을 사용합니다.

document.getElementById("header").style.BackgroundColor= "#ccc";
하지만 "float"라는 단어는 JavaScript 예약어이므로 object.style.float를 사용하여 액세스할 수 없습니다. 여기서는 두 개의 브라우저에서 이 작업을 수행할 수 있습니다.
IE에서는 다음과 같이 작성하세요.

document.getElementById("header").style.styleFloat = "left";
Firefox에서 다음을 작성하세요.

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

2. 요소의 추론된 스타일
JavaScript는 object.style.property 구문을 사용하여 외부에서 CSS 스타일에 쉽게 액세스하고 수정할 수 있지만 구문은 다음과 같습니다. 이미 설정된 인라인 스타일이나 JavaScript에 의해 직접 설정된 스타일만 검색합니다. 외부 스타일 시트에 액세스할 수 없습니다. 요소의 "추론된" 스타일에 액세스하려면 다음 코드를 사용할 수 있습니다.
IE에서 다음을 작성하세요.

var myObject = document.getElementById("header")
var myStyle = myObject .currentStyle.BackgroundColor;
Firefox에서 작성:

var myObject = document.getElementById("header");
var myCompulatedStyle = document.defaultView.getCompulatedStyle(myObject, null); 🎜>var myStyle = myCompulatedStyle.BackgroundColor;

3. 요소의 "class"에 액세스합니다.
"float"와 마찬가지로 "class"는 JavaScript에서 예약어입니다. 브라우저 컨테이너에서는 "클래스"에 액세스하기 위해 다음 구문을 사용합니다. IE에서는 다음과 같이 작성하세요.

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className")
Firefox에서는 다음과 같이 작성하세요. :

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
이 구문은 setAttribute 메서드를 사용해도 적용됩니다.

4.
태그의 "for"에 액세스합니다. 3번 항목에서 언급했듯이 태그 "for"에 액세스하려면 보이지 않는 구문 구별도 사용해야 합니다.
IE에서 작성:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor")
Firefox에서 작성:

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

5. 마우스 포인터 위치 가져오기
마우스 포인터의 위치를 ​​계산하는 것은 매우 드물지만 필요할 때 IE와 Firefox에서는 구문이 다릅니다. 여기에 작성된 코드는 가장 기본적인 것일 수도 있고, 복잡한 이벤트 처리의 특정 부분일 수도 있습니다. 하지만 유사점과 차이점을 설명할 수는 있습니다. 동시에 IE의 결과는 Firefox와 더 다를 것이며 이 방법 자체에는 버그가 있다는 점을 지적해야 합니다. 일반적으로 이 차이는 "드래그 위치"로 보상할 수 있지만 이는 다른 주제에 대한 기사입니다 :) ! IE에서는 다음과 같이 작성하세요.

var myCursorPosition = [0, 0]; >myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
Firefox에서 다음을 작성하세요.

var myCursorPosition =
myCursorPosition[ 0] = event.pageX;
myCursorPosition[1] = event.pageY;

6. 보이는 영역과 창의 크기를 가져옵니다.

일반적으로 "표시 영역"이라고 하는 브라우저의 표시 위치 크기입니다. IE에서는 다음을 작성하세요.
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement. ;
Firefox에서 다음을 작성하세요.

var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight; >
7. 알파 투명도

글쎄, 이건 자바스크립트 구문 문제가 아니라 CSS에서 파생된 알파 투명도입니다. 그러나 객체가 페이드 인/아웃되어야 하는 경우 이를 수행하려면 JavaScript가 필요합니다. 이는 일반적으로 루프에서 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";
또 무엇이 다른가요?
이 내용은 저자가 자신의 경험을 바탕으로 (Firefox와 IE의 7가지 JavaScript 차이점을 통해) 편집한 것이며 sofish는 아직 JavaScript의 초보자입니다. 더 많은 차이점이 있다면, 문제를 제기하고, 공유하고, 함께 배울 수 있습니다!