IE와 FireFox_javascript 기술 간의 JS 공통 기능 차이점 요약

1.event.srcElement

코드 복사 코드는 다음과 같습니다.

//srcElement는 다음과 같습니다. IE에서만 사용됩니다. 아래에서 사용하는 타겟은 FireFox에서 사용하는 호환성 작성 방법입니다.
var obj = e.srcElement ? e.srcElement :

2. e.originalEvent.x

코드 복사 코드는 다음과 같습니다.

// e. OriginalEvent.x는 IE에서만 사용할 수 있으며, FireFox에서만 e.originalEvent.layerX를 사용할 수 있습니다. 호환성 작성 방법은 다음과 같습니다.
var positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset ().left || 0

3.windows.event
window.event는 Firefox가 아닌 IE에서만 실행할 수 있습니다. ,
Firefox 이벤트는 이벤트가 발생할 때만 사용할 수 있기 때문입니다.
IE:

코드 복사 코드는 다음과 같습니다:

다음은 예시입니다.
화면에서 Enter를 누르면 이벤트가 발생하지 않지만, TextArea 이벤트와 같은 상자에서 Enter를 클릭하면 트리거됩니다. 자신이 사용하기 위해 코드를 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

4.innerText

코드 복사 코드는 다음과 같습니다.

="버튼" 유형 ="버튼" value="testInnerText" onclick="javascript:testInnerText()"/>

5.CSS "float" 속성


주어진 객체의 특정 CSS 속성을 가져오는 기본 구문은 object.style 속성이며, 하이픈으로 연결된 속성은 낙타 명명법으로 대체해야 합니다. 예를 들어 ID가 "header"인 div의 배경색 속성을 가져오려면 다음 구문을 사용해야 합니다.

document.getElementById("header").style.borderBottom= "1px solid #ccc";

그러나 "float"는 JavaScript의 예약어이므로 object.style.float를 사용하여 "float" 속성을 얻을 수 없습니다. 다음은 두 브라우저에서 사용하는 방법입니다.

IE 구문:

document.getElementById("header").style.styleFloat = "left"; Firefox 구문:

document.getElementById("header").style.cssFloat = "left";
6. 요소의 계산된 스타일


위 개체를 사용합니다. style.property, JavaScript는 객체에 설정된 CSS 스타일을 쉽게 얻고 수정할 수 있습니다. 그러나 이 구문의 한계는 HTML에서 스타일을 인라인으로 가져오거나 JavaScript를 사용하여 직접 스타일을 설정할 수만 있다는 것입니다. 스타일 개체는 외부 스타일 시트를 사용하여 설정된 스타일을 얻을 수 없습니다. 객체의 "계산된 스타일"을 얻으려면 다음 코드를 사용합니다:

IE 구문:

코드 복사 코드는 다음과 같습니다.

var myObject = document.getElementById("header");

var myStyle = myObject.currentStyle.BackgroundColor;

코드 복사

코드는 다음과 같습니다. var myObject = document.getElementById("header "); var myCompulatedStyle = document.defaultView.getComputeStyle(myObject, null); var myStyle = myCompulatedStyle.BackgroundColor;

7. 요소의 "class" 속성을 가져옵니다.


"float" 속성의 경우와 마찬가지로 두 브라우저는 이 속성을 얻기 위해 서로 다른 JavaScript 방법을 사용합니다.

IE 구문:




코드 복사

코드는 다음과 같습니다. var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("className");

Firefox 구문:

코드 복사

코드는 다음과 같습니다. var myObject = document.getElementById("header") var myAttribute = myObject. getAttribute("class") ;

8. 레이블의 "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") ;

setAtrribute 메소드에도 동일한 구문이 사용됩니다.

9. 커서 위치 가져오기

요소의 커서 위치를 가져오는 경우는 거의 없습니다. 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; 창 또는 브라우저 창의 크기 가져오기

때때로 "창"이라고 하는 브라우저의 유효 창 공간 크기를 알아내는 것이 필요합니다.

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;

11.Alpha transparent


사실은 JavaScript 구문 항목이 아닙니다. 알파 투명도는 CSS를 통해 설정됩니다. 그러나 객체가 JavaScript를 통해 페이드되도록 설정된 경우 일반적으로 루프 내에서 CSS 알파 설정을 가져와 수행해야 합니다. 다음 JavaScript를 통해 CSS 코드를 변경하려면:

IE 구문:




코드 복사

코드는 다음과 같습니다. 다음: #myElement { filter: alpha(opacity=50) }

Firefox 구문:

코드 복사

코드는 다음과 같습니다. #myElement { opacity: }

JavaScript에서 이러한 값을 얻으려면 스타일 개체를 사용해야 합니다:

IE 구문:

복사 code

코드는 다음과 같습니다. var myObject = document.getElementById("myElement") myObject.style.filter = "alpha(opacity) =80)";

Firefox 구문:

코드 복사

코드는 다음과 같습니다. var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";

물론 언급했듯이 opcity는 /alpha는 일반적으로 애니메이션 효과를 생성하기 위해 루프 중간에 변경되지만 이는 메소드 구현 방법을 명확하게 설명하기 위한 간단한 예입니다.

저자:
히어로비스트