IE와 Firefox 사이의 JavaScript 구문 차이점_javascript 팁

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

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

1. CSS “float” 속성

특정 객체에 대한 특정 CSS 속성을 가져오는 기본 구문은 object.style 속성이며, 하이픈으로 연결된 속성은 카멜 표기법으로 대체됩니다. 예를 들어, ID가 "header"인 div의 background-color 속성을 얻으려면 다음 구문을 사용합니다.

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

document.getElementById("header").style.borderBottom = "1px 솔리드 #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 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. 창 또는 브라우저 창의 크기를 가져옵니다

때로는 일반적으로 '창'이라고 불리는 브라우저의 유효 창 공간 크기를 알아내야 할 때가 있습니다.

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. Alpha 透明

嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS 的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码：

IE 语法：

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

Firefox 语法：

 #myElement {
opacity: 0.5;
}

要使用 JavaScript 获取这些值，需要使用 style 对象：

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，来创建动画效果，但这这是个简单的例子，只是为了明白地描述方法是如何实现地。

7个方面在JavaScript语法上不同的点，希望对大家的学习有所帮助。