특정 브라우저를 대상으로 하기 위해 길고 지루한 코드 블록을 사용했던 JavaScript의 역사는 끝났지만, 일부 코드가 사용자 컴퓨터에서 올바르게 작동하는지 확인하기 위해 가끔 간단한 코드 블록과 객체 감지를 사용하는 것이 여전히 필요합니다.
이 기사에서는 Internet Explorer와 Firefox 사이의 JavaScript 구문이 다른 7가지 방식을 설명합니다.
1. CSS “부동” 속성
특정 객체의 특정 CSS 속성을 가져오는 기본 구문은 object.style 속성이며, 하이픈으로 연결된 속성은 대신 카멜 표기법을 사용합니다. 예를 들어, ID가 "header"인 div의 background-color 속성을 얻으려면 다음 구문을 사용해야 합니다.
document.getElementById("header").style.borderBottom= "1px solid #ccc";
그러나 "float"는 JavaScript의 예약어이므로 object.style.float를 사용하여 "float" 속성을 얻을 수 없습니다. 두 브라우저에서 이를 사용하는 방법은 다음과 같습니다.
IE 구문:
document.getElementById("header").style.styleFloat = "왼쪽";
Firefox 구문:
document.getElementById("header").style.cssFloat = "왼쪽";
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 myCompulatedStyle = document.defaultView.getComputeStyle(myObject, null);
var myStyle = myCompulatedStyle.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의 결과와 다르기 때문에 이 방법에는 몇 가지 문제가 있다는 점에 유의해야 합니다. 종종 이 차이는 "스크롤 위치"를 획득하여 보상할 수 있지만 이는 다른 기사의 주제입니다.