FF와 IE의 7가지 JavaScript 차이점

특정 브라우저를 대상으로 길고 성가신 코드 블록을 사용했던 JavaScript의 역사적 시대는 끝났지만, 일부 코드가 사용자 컴퓨터에서 제대로 작동하는지 확인하기 위해 가끔씩 간단한 코드 블록과 객체 감지를 사용하는 것은 여전히 ​​필요합니다.

이 글에서는 Internet Explorer와 Firefox 간 JavaScript 구문의 7가지 측면을 간략하게 설명하겠습니다.

1. CSS “float” 속성
주어진 객체의 특정 CSS 속성을 얻기 위한 기본 구문은 object.style 속성이며, 하이픈으로 연결된 속성은 카멜 명명법을 사용하여 대체합니다. . 예를 들어, ID가 "header"인 p의 배경색 속성을 가져오려면 다음 구문을 사용해야 합니다.
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";

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

IE 구문:

코드는 다음과 같습니다.

var myObject = document.getElementById("header"); 
var myStyle = myObject.currentStyle.backgroundColor;

Firefox 구문:

코드는 다음과 같습니다.

var myObject = document.getElementById("header"); 
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null); 
var myStyle = myComputedStyle.backgroundColor;

3.
요소의 "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");

4. 라벨의 "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 메소드에도 동일한 구문이 사용됩니다.

5. 커서 위치 가져오기
이 작업이 필요한 경우 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;

6. 창 또는 브라우저 창의 크기를 가져옵니다.
때로는 일반적으로 "Windows"가 되는 브라우저의 유효 창 공간 크기입니다.

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;

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

IE 구문:

코드는 다음과 같습니다.

#myElement { 
filter: alpha(opacity=50); 
}

Firefox 구문:

코드는 다음과 같습니다.

#myElement { 
opacity: 0.5; 
}

JavaScript를 사용하여 이러한 값을 얻으려면 스타일 개체를 사용해야 합니다.

IE 구문:

코드는 다음과 같습니다:

var myObject = document.getElementById("myElement"); 
myObject.style.filter = "alpha(opacity=80)";

Firefox 구문:

코드는 다음과 같습니다.

var myObject = document.getElementById("myElement"); 
myObject.style.opacity = "0.5";

물론 이미 언급했듯이 애니메이션 효과를 만들기 위해 루프 중간에 opcity/alpha를 변경하는 것이 일반적이지만 이는 간단합니다. 예제는 메소드가 어떻게 구현되는지 명확하게 설명하기 위한 것입니다.