특정 브라우저를 타겟팅하기 위해 길고 성가신 코드 블록을 사용하는 JavaScript의 역사의 기간이 끝나지 만, 일부 코드가 사용자 시스템에서 올바르게 작동하도록 간단한 코드 블록 및 객체 감지를 사용해야합니다.
이 기사에서는 Internet Explorer와 Firefox 사이의 JavaScript 구문의 7 가지 측면을 간략하게 설명하겠습니다.
1. CSS "Float"속성
주어진 객체의 특정 CSS 속성을 얻기위한 기본 구문은 객체입니다. 스타일 속성이며 하이픈이있는 속성은 낙타 명명법으로 교체해야합니다. 예를 들어, ID "헤더"가있는 DIV의 배경색 속성을 얻으려면 다음 구문을 사용해야합니다.
코드 사본은 다음과 같습니다. documb
그러나 "float"는 JavaScript의 예약 된 단어이므로 Object.style.foat를 사용하여 "float"속성을 얻을 수 없습니다. 두 브라우저에서 사용하는 방법은 다음과 같습니다.
IE 구문 :
코드 사본은 다음과 같습니다. document.getElementById ( "Header"). Style.StyleFloat = "Left";
Firefox Syntax :
코드 사본은 다음과 같습니다. documen
2. 요소 계산 스타일
위의 Object.style.property를 사용하여 JavaScript는 객체의 CSS 스타일을 쉽게 얻고 수정할 수 있습니다. 그러나이 구문의 한계는 HTML에서 인라인 스타일 만 얻거나 스타일을 설정하기 위해 JavaScript를 직접 사용할 수 있다는 것입니다. 스타일 객체는 외부 스타일 시트를 사용하여 스타일을 설정할 수 없습니다. 객체의 "계산 된 스타일"을 얻으려면 다음 코드를 사용합니다.
IE 구문 :
var myObject = document.getElementById ( "헤더"); var mystyle = myObject.currentStyle.backgroundColor;
Firefox Syntax :
var myObject = document.getElementById ( "header"); var mycomputedStyle = document.defaultView.getComputedStyle (myObject, null); var mystyle = mycomputedStyle.backgroundColor;
3. 요소의 "클래스"속성을 가져옵니다
"float"속성의 경우와 마찬가지로 두 브라우저는 다른 JavaScript 메소드를 사용 하여이 속성을 얻습니다.
IE 구문 :
var myObject = document.getElementById ( "header"); var myAttribute = myObject.getAttribute ( "className");
Firefox Syntax :
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 Syntax :
var myObject = document.getElementById ( "myLabel"); var myAttribute = myObject.getAttribute ( "for");
setattribute 메소드에 대해서도 동일한 구문도 마찬가지입니다.
5. 커서 위치를 얻으십시오
요소의 커서 위치를 얻는 것은 드 rare니다. 이 작업을 수행 해야하는 경우 IE와 Firefox의 구문도 다릅니다. 이 샘플 코드는 매우 기본적이며 일반적으로 많은 복잡한 이벤트 처리의 일부로 사용되며 여기에서 차이점을 설명하는 데만 사용됩니다. IE의 결과는 Firefox의 결과와 다르 므로이 방법에는 몇 가지 문제가 있습니다. 일반적 으로이 차이는 "스크롤 위치"를 얻음으로써 보상 할 수 있지만 다른 기사의 주제입니다.
IE 구문 :
var mycursorPosition = [0, 0]; myCursorPosition [0] = event.clientx; myCursorPosition [1] = event.clienty;
Firefox Syntax :
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 Syntax :
var myBrowsersize = [0, 0]; myBrowsersize [0] = wind
7. 알파 투명
글쎄, 이것은 실제로 JavaScript의 구문 프로젝트가 아닙니다. Alpha Transparency는 CSS를 통해 설정됩니다. 그러나, 객체가 JavaScript를 통해 사라지거나 아웃되도록 설정되면, 이는 일반적으로 루프 내부에있는 CSS의 알파 설정을 얻어 달성해야합니다. 다음 JavaScript로 CSS 코드를 변경하려면 다음과 같습니다.
IE 구문 :
#MyElement {필터 : 알파 (불투명도 = 50);}Firefox Syntax :
#MyElement {불투명도 : 0.5;}JavaScript를 사용하여 이러한 값을 얻으려면 스타일 객체를 사용해야합니다.
IE 구문 :
var myObject = document.getElementById ( "mylement"); myObject.style.filter = "alpha (불투명도 = 80)";
Firefox Syntax :
var myObject = document.getElementById ( "mylement"); myObject.style.opacity = "0.5";
물론, 애니메이션 효과를 생성하기 위해 루프 중간에 Opcity/Alpha를 변경하는 것이 일반적으로 언급되었지만, 이는 방법이 구현되는 방식을 명확하게 설명하는 간단한 예입니다.
JavaScript의 관점에서 JavaScript 구문에는 7 가지 지점이 있습니다. 모든 사람의 학습에 도움이되기를 바랍니다.