IE,FF,Chrome 브 라 우 저의 JS 차이 소개

브 라 우 저 회 사 는 각자 이익 을 고려 해 지금까지 브 라 우 저의 HTML 기준 이나 JS 기준 이 통일 되 지 않 았 기 때문이다.일반적인 개발 에서 우리 가 자주 사용 하 는 JS 프레임 워 크 는 기본적으로 JS 가 각 브 라 우 저 에서 의 차 이 를 처리 해 주 었 지만 개발 자로 서 JS 가 브 라 우 저 에서 의 차 이 를 알 아야 합 니 다.FF,Chrome:window.event 대상 이 없 음 FF,Chrome:window.event 대상 이 없고 event 대상 만 있 습 니 다.IE 에 서 는 window.event 만 지원 하고 다른 주류 브 라 우 저 는 둘 다 지원 하기 때문에 일반적으로 function handle(e){e=e|event 라 고 씁 니 다.}HTML 요소 가 져 오기 IE:el.name,el.getAttribute(name)FF,Chrome:기본 속성 지원 el.name 나머지 속성 은 el.getAttribute(name)사용자 정의 속성 문제 IE 에서 일반적인 속성 을 가 져 오 는 방법 으로 사용자 정의 속성 을 가 져 올 수 있 고 getAttribute()로 사용자 정의 속성 을 가 져 올 수 있 습 니 다.Firefox 에 서 는 getAttribute()를 사용 하여 사용자 정의 속성 을 가 져 올 수 있 습 니 다.Ajax 요청 IE:new ActiveXObject()FF,Chrome:new XML HttpRequest()HTML 요소 가 져 오기 IE:el.name,el.getAttribute(name)FF,Chrome:기본 속성 지원 el.name 나머지 속성 은 el.getAttribute(name)innerText 만 지원 합 니 다.FF 는 innerText 를 지원 하지 않 습 니 다.textContent 를 지원 합 니 다.그러나 textContent 는 innerText 처럼 요 소 를 고려 하 는 display 방식 이 없 기 때문에 IE 와 완전히 호 환 되 지 않 습 니 다.textContent 를 사용 하지 않 으 면 문자열 에 HTML 코드 가 포함 되 어 있 지 않 아 도 innerHTML 로 대체 할 수 있 습 니 다.if(document.all){ document.getElementById('element').innerText = "mytext"; } else{ document.getElementById('element').textContent = "mytext"; } 마우스 포인터 의 위 치 를 가 져 와 마우스 포인터 의 위 치 를 계산 하 는 것 은 매우 드 물 지만 필요 할 때 IE 와 Firefox 의 구법 은 다르다.여기에 적 힌 코드 는 가장 기본 적 이 고 복잡 한 사건 처리 의 일부분 일 수도 있다.그러나 그들 은 그 중의 공통점 과 차이 점 을 설명 할 수 있다.또한 반드시 지적 해 야 할 것 은 결과 가 Firefox 에 비해 IE 가 더 다 를 수 있다 는 것 이다.이런 방법 자체 가 버그 가 있다 는 것 이다.IE 에 이렇게 쓰 여 있 습 니 다:var my CursorPosition=[0,0];myCursorPosition[0] = event.clientX; myCursorPosition[1] = event.clientY; Firefox 에서 이렇게 쓰 기:var my CursorPosition=[0,0];myCursorPosition[0] = event.pageX; myCursorPosition[1] = event.pageY; 보 이 는 영역,창의 크기 를 가 져 오 려 면 브 라 우 저의 시각 적 위치 크기 를 찾 아야 합 니 다.보통'보 이 는 영역'이 라 고 부 릅 니 다.IE 에 이렇게 쓰 여 있 습 니 다:var my Browser Size=[0,0];myBrowserSize[0] = document.documentElement.clientWidth; myBrowserSize[1] = document.documentElement.clientHeight; Firefox 에 이렇게 쓰 여 있 습 니 다:var my Browser Size=[0,0];myBrowserSize[0] = window.innerWidth; myBrowserSize[1] = window.innerHeight; 알파 투명 은 자 바스 크 립 트 문법 문제 가 아니 라 CSS 에서 유래 한 알파 투명 이다.그러나 어떤 물체 가 페이드아웃/아웃 이 필요 할 때 자 바스 크 립 트 로 표현 해 야 합 니 다.이것 은 CSS 에 접근 하 는 알파 투명 설정 을 통 해 이 루어 집 니 다.보통 하나의 순환 에서 이 루어 집 니 다.당신 이 수정 해 야 할 자 바스 크 립 트 의 코드 는 다음 과 같 습 니 다:IE 에 이렇게 쓰 십시오:\#my Element{filter:alpha(opacity=50);}Firefox 에 이렇게 쓰 여 있 습 니 다:\#my Element{opacity:0.5;}IE 에 이렇게 쓰 여 있 습 니 다:var my Object=document.getElement ById("my Element");myObject.style.filter = "alpha(opacity=80)"; Firefox 에 이렇게 쓰 기:var my Object=document.getElement ById("my Element");myObject.style.opacity = "0.5"; CSS"float"값 이 주어진 CSS 값 에 접근 하 는 가장 기본 적 인 구법 은 object.style.property 입 니 다.연결 문자 가 있 는 값 을 낙타 봉 으로 바 꿉 니 다.예 를 들 어 특정한 ID 가"header"인
의 background-color 값 을 방문 하면 다음 과 같은 구법 을 사용 합 니 다.document.getElement ById("header").style.backgroundColor="\#ccc";그러나"float"라 는 단 어 는 자 바스 크 립 트 보존 자 이기 때문에 object.style.float 로 접근 할 수 없습니다.여기 서 우 리 는 두 가지 브 라 우 저 에서 이렇게 할 수 있 습 니 다.IE 에 document.getElement ById("header").style.styleFloat="left"라 고 쓸 수 있 습 니 다.Firefox 에 이렇게 쓰 여 있 습 니 다:document.getElement ById("header").style.cssFloat="left";요소 의 추산 스타일 자바 스 크 립 트 는 object.style.property 구법 을 사용 하여 외부 에서 특정한 CSS 스타일 을 편리 하 게 접근 하고 수정 할 수 있 지만,이 구법 들 은 설 치 된 줄 내 스타일 이나 자바 스 크 립 트 가 직접 설정 한 스타일 만 추출 할 수 있 습 니 다.외부 스타일 시트 에 접근 할 수 없습니다.요소 의'추산'스타일 에 접근 하기 위해 서 다음 코드 를 사용 할 수 있 습 니 다.IE 에 서 는 var my Object=document.getElement ById("header")라 고 쓸 수 있 습 니 다.var myStyle = myObject.currentStyle.backgroundColor; Firefox 에 이렇게 쓰 기:var my Object=document.getElement ById("header");var myComputedStyle = document.defaultView.getComputedStyle(myObject, null); var myStyle = myComputedStyle.backgroundColor; 요소 에 접근 하 는"class","class"는 자 바스 크 립 트 의 보존 글자 입 니 다.이 두 브 라 우 저 에서 우 리 는 다음 문법 을 사용 하여"class"에 접근 합 니 다.IE 에 이렇게 쓰 여 있 습 니 다:var my Object=document.getElement ById("header");var myAttribute = myObject.getAttribute("className"); Firefox 에 이렇게 쓰 기:var my Object=document.getElement ById("header");var myAttribute = myObject.getAttribute("class");

좋은 웹페이지 즐겨찾기