FF와 IE에서 사용되는 자바스크립트의 7가지 차이점
페이지 정보
작성자 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 5,818회 작성일 11-06-01 19:23본문
1. CSS "float" 속성
- IE 문법
1. document.getElementById("header").style.styleFloat = "left";
- FF 문법
1. document.getElementById("header").style.cssFloat = "left";
2. Computed Style
<div style="background-color:#red;"></div>
이런식으로 작업할 경우
document.getElementsByTagName('div')[0].style.backgroundColor할 경우 값을 가져 올 수 있지만
<div id="header" class="red"></div>
클래스를 주고 css를 정의할 경우 위와 같은 방식으로는 값을 가져 올 수 없습니다.
해서 위의 내용과 값이 클래스명으로 값을 줬을 경우는 다음과 같이 해주셔야 합니다.
- IE 문법
1. var myObject = document.getElementById("header");
2. var myStyle = myObject.currentStyle.backgroundColor;
- FF 문법
1. var myObject = document.getElementById("header");
2. var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
3. var myStyle = myComputedStyle.backgroundColor;
3. class명을 스크립트에서 가져올때
- IE 문법
1. var myObject = document.getElementById("header");
2. var myAttribute = myObject.getAttribute("className");
- FF 문법
1. var myObject = document.getElementById("header");
2. var myAttribute = myObject.getAttribute("class");
4. Label 태그의 for속성을 접근할때는
- IE 문법
1. var myObject = document.getElementById("myLabel");
2. var myAttribute = myObject.getAttribute("htmlFor");
- FF 문법
1. var myObject = document.getElementById("myLabel");
2. var myAttribute = myObject.getAttribute("for");
5. Cursor의 포인터를 가져올때는
- IE 문법
1. var myCursorPosition = [0, 0];
2. myCursorPosition[0] = event.clientX;
3. myCursorPosition[1] = event.clientY;
- FF 문법
1. var myCursorPosition = [0, 0];
2. myCursorPosition[0] = event.pageX;
3. myCursorPosition[1] = event.pageY;
6. Viewport의 크기나 브라우져의 윈도우 사이즈를 가져올때
- IE 문법
1. var myBrowserSize = [0, 0];
2. myBrowserSize[0] = document.documentElement.clientWidth;
3. myBrowserSize[1] = document.documentElement.clientHeight;
- FF 문법
1. var myBrowserSize = [0, 0];
2. myBrowserSize[0] = window.innerWidth;
3. myBrowserSize[1] = window.innerHeight;
7. 투명 Alpha값
- IE 문법
1. #myElement {
2. filter: alpha(opacity=50);
3. }
1. var myObject = document.getElementById("myElement");
2. myObject.style.filter = "alpha(opacity=80)";
- FF 문법
1. #myElement {
2. opacity: 0.5;
3. }
1.var myObject = document.getElementById("myElement");
2.myObject.style.opacity = "0.5";
- IE 문법
1. document.getElementById("header").style.styleFloat = "left";
- FF 문법
1. document.getElementById("header").style.cssFloat = "left";
2. Computed Style
<div style="background-color:#red;"></div>
이런식으로 작업할 경우
document.getElementsByTagName('div')[0].style.backgroundColor할 경우 값을 가져 올 수 있지만
<div id="header" class="red"></div>
클래스를 주고 css를 정의할 경우 위와 같은 방식으로는 값을 가져 올 수 없습니다.
해서 위의 내용과 값이 클래스명으로 값을 줬을 경우는 다음과 같이 해주셔야 합니다.
- IE 문법
1. var myObject = document.getElementById("header");
2. var myStyle = myObject.currentStyle.backgroundColor;
- FF 문법
1. var myObject = document.getElementById("header");
2. var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
3. var myStyle = myComputedStyle.backgroundColor;
3. class명을 스크립트에서 가져올때
- IE 문법
1. var myObject = document.getElementById("header");
2. var myAttribute = myObject.getAttribute("className");
- FF 문법
1. var myObject = document.getElementById("header");
2. var myAttribute = myObject.getAttribute("class");
4. Label 태그의 for속성을 접근할때는
- IE 문법
1. var myObject = document.getElementById("myLabel");
2. var myAttribute = myObject.getAttribute("htmlFor");
- FF 문법
1. var myObject = document.getElementById("myLabel");
2. var myAttribute = myObject.getAttribute("for");
5. Cursor의 포인터를 가져올때는
- IE 문법
1. var myCursorPosition = [0, 0];
2. myCursorPosition[0] = event.clientX;
3. myCursorPosition[1] = event.clientY;
- FF 문법
1. var myCursorPosition = [0, 0];
2. myCursorPosition[0] = event.pageX;
3. myCursorPosition[1] = event.pageY;
6. Viewport의 크기나 브라우져의 윈도우 사이즈를 가져올때
- IE 문법
1. var myBrowserSize = [0, 0];
2. myBrowserSize[0] = document.documentElement.clientWidth;
3. myBrowserSize[1] = document.documentElement.clientHeight;
- FF 문법
1. var myBrowserSize = [0, 0];
2. myBrowserSize[0] = window.innerWidth;
3. myBrowserSize[1] = window.innerHeight;
7. 투명 Alpha값
- IE 문법
1. #myElement {
2. filter: alpha(opacity=50);
3. }
1. var myObject = document.getElementById("myElement");
2. myObject.style.filter = "alpha(opacity=80)";
- FF 문법
1. #myElement {
2. opacity: 0.5;
3. }
1.var myObject = document.getElementById("myElement");
2.myObject.style.opacity = "0.5";
댓글목록
등록된 댓글이 없습니다.