이 기사에서는 Internet Explorer와 Firefox의 JavaScript 구문의 여러 측면에 대해 간략하게 설명합니다.
1. CSS “부동” 속성
특정 객체의 특정 CSS 속성을 가져오는 기본 구문은 object.style 속성이며, 하이픈으로 연결된 속성은 대신 카멜 표기법을 사용합니다. 예를 들어 ID가 "header"인 div의 배경색 속성을 얻으려면 다음 구문을 사용해야 합니다.
document.getElementById("header").style.borderBottom= "1px solid #ccc"
; "float"는 JavaScript 예약어이므로 "float" 속성을 얻기 위해 object.style.float를 사용할 수 없습니다. 두 브라우저에서 이를 사용하는 방법은 다음과 같습니다.
IE 구문:
document.getElementById("header").style.styleFloat = "left"
;
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
;
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")
;
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;