우선, 여기에서 내 테스트 브라우저의 버전은 Chrome15.0.874.121 Firefox 8.01 IE9 Ietetester입니다.
다음 코드는 문에 관한 것입니다
1 : 롤링 바를 얻습니다
다음과 같이 코드 코드를 복사하십시오.
함수 getscroll () {{)
var t, l, w, h;
if (document.documentElement && document.documentedlement.scrolltop) {
t = document.documentElement.scrolltop; // 롤링 바의 상단
l = document.documentElement.scrollleft; // 스크롤 막대의 왼쪽 끝
w = document.documentElement.scrollwidth; // 롤링 바의 너비는 페이지의 너비입니다.
h = document.documentElement.scrollheight; // 롤링 바의 높이
}
또 다른
if (document.body) {
t = document.body.scrolltop;
l = document.body.scrollleft;
w = document.body.scrollwidth;
h = document.body.scrollheight;
}
반품 {
T : T,
L : L,
W : W,
H : h
};
}
2 :보기 브라우저의 너비 높이를 얻습니다
다음과 같이 코드 코드를 복사하십시오.
함수 getPageWidth () {
var pagewidth = window.innerWidth;
ifof pagewindth! = "number") {{
if (document.comPatMode == "CSS1compat") {{
pagewidth = document.documentElement.clientWidth;
}
또 다른 {
pagewidth = document.body.clientWidth;
}
}
반환 pagewidth;
}
함수 getPageHeight () {
var pageheight = window.innerheight;
ifof pagewindth! = "number") {{
if (document.comPatMode == "CSS1compat") {{
pageheight = document.documentElement.clientHeight;
}
또 다른 {
pageheight = document.body.clitingHeight;
}
}
PageHeight 리턴;
}
3 : 현재 브라우저 모델 이름을 얻으십시오
다음과 같이 코드 코드를 복사하십시오.
기능 () {
var sys = {};
var ua = navigator.useragent.tolowercase ();
var s;
(s = ua.match (/msie ([/d.+)/)) : sys.ie = s [1] : (s = ua.match // ([/d. ])/ /)? sys.firex = s [1] : (s = ua.match ([/d.]+))? (/Opera. )))))))))))).
if (sys.ie! = null) {
return ( "즉," + sys.ie); // IE 브라우저 및 버전 번호를 결정합니다
}
if (sys.firefox! = null) {
return ( "Firefox :" + sys.firefox);
}
if (sys.chrome! = null) {
return ( "Chrome :" + sys.chrome); // 크롬 브라우저 및 버전 번호를 결정합니다
}
if (sys.opera! = null) {
return ( "Opera :" + sys.opera); // 오페라 브라우저 및 버전 번호
}
if (sys.safari! = null) {
return ( "safari :" + sys.safari);
}
}
4 : 이벤트 모니터링
다음과 같이 코드 코드를 복사하십시오.
함수 (요소, 유형, 핸들러) {{
if (element.addeventristener) {{
element.addeventListener (유형, 핸들러, 거짓);
}
또 다른
ifment.attachevent) {
요소 .ATTACHEVENT ( "on" + 유형, 핸들러);
}
또 다른 {
요소 [on " + type] = handler;
}
}
5 : 이벤트 제거
다음과 같이 코드 코드를 복사하십시오.
함수 (요소, 유형, 핸들러) {{
if (element.removeeventListener) {
요소 .removeEventListener (유형, 핸들러, 거짓);
}
또 다른
ifment.detachevent) {
요소 .detachevent ( "on" + 유형, 핸들러);
}
또 다른 {
요소 [ "on" + type] = null;
}
}
6 : 이벤트가있을 때 Firefox 이벤트가 지속적으로 배포되면 첫 번째 사건에 문제가 있습니다.
다음과 같이 코드 코드를 복사하십시오.
기능 (이벤트) {
이벤트 = (이벤트? 이벤트 : window.event);
if (event == null) {
var $ e = function () {
var c = $ e.caller;
while (c.caller)
C = C.Caller;
반환 c. arguments [0]
};
__defineGetter __ ( "이벤트", $ e);
}
반환 이벤트;
}
7 : 기본 이벤트 방지
다음과 같이 코드 코드를 복사하십시오.
기능 (이벤트) {
if (event.preventDefault) {
event.preventDefault ();
}
또 다른 {
event.returnvalue = false;
}
}
8 : 사건을 계속 퍼뜨리지 마십시오
다음과 같이 코드 코드를 복사하십시오.
기능 (이벤트) {
if (event.stopPropagation) {
event.stopPropagation ();
}
또 다른 {
event.cancelbubble = true;
}
}
9 : 이벤트 목표를 얻으십시오
다음과 같이 코드 코드를 복사하십시오.
기능 (이벤트) {
이벤트 || event.srcelement;
}
10 : documen.doctype는 지원과 일치하지 않습니다
E : 문서 유형 설명이 있으면 오류로 인해 주석과 주석 노드로 설명됩니다.
Firefox : 문서 유형 설명이있는 경우 Document.Doctype는 Firstchild 또는 Childnodes를 통해 동일한 노드에 액세스 할 수 있습니다.
Safari, Chrome, Opera : 문서 유형 설명이 있으면 설명으로 설명되지만 Childnodes에는 문서의 하위 노드로 표시되지 않습니다.
11 : 요소를 찾으십시오
때때로 나는 IE가 항상 무엇을하는지 이해하지 못합니다. 나는 항상 변화를 만들고 싶습니다. 시스템이 브라우저를 내버려 두지 않으면 IE의 점유율이 적을 것이라고 감히 말할 것입니다.
ID와 이름이 동일하면 반환됩니다.
다음과 같이 코드 코드를 복사하십시오.
<html>
<헤드>
<스크립트 연기>
var it item = document.getElementById ( "my");
itm.Value = "Second";
</스크립트>
</head>
<body>
<입력 유형 = "text"name = "my"value = "First">
</body>
</html>
즉, 결과는 변경됩니다.
IE도 마찬가지입니다. ID는 구별되지 않습니다
다음과 같이 코드 코드를 복사하십시오.
<html>
<헤드>
<스크립트 연기>
var it item = document.getElementById ( "my");
itm.Value = "Second";
</스크립트>
</head>
<body>
<입력 유형 = "text"id = "my"value = "First">
</body>
</html>
죄송합니다. 그의 결과가 다시 바뀌 었습니다.
12 : 사용자 정의 속성 인 경우 item.myattripts는 IE 브라우저없이 올바른 결과를 그릴 수 없습니다.
다음과 같이 코드 코드를 복사하십시오.
함수 (항목, Myatt) {
ITTRIBUTES [MYATT]를 반환합니다.
}
같은 경우 설정 속성은 무엇을 해야하는지, 즉 할당을 알아야합니다.
다음과 같이 코드 코드를 복사하십시오.
함수 (항목, myatt, value) {
aittributes [myatt].
}
13 : 요소의 하위 노드 수
다음과 같이 코드 코드를 복사하십시오.
<ul id = "myul">
<li> 첫 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ul>
IE 결과는 3이고 다른 브라우저는 7입니다.
노드 사이의 빈 기호는 다른 브라우저의 텍스트 노드이며 결과는 7입니다. 이렇게되면
다음과 같이 코드 코드를 복사하십시오.
<ul id = "myul"> <li> 첫 번째 </li> <li> 두 번째 </li> <li> 세 번째 </li> </ul>
이런 식으로 모든 사람의 결과는 3입니다.
14 : 노드 문제를 만듭니다
다음과 같이 코드 코드를 복사하십시오.
// 요소를 동적으로 추가하면 모든 브라우저를 달성 할 수 있습니다
var newnode = document.createElement ( "입력");
newnode.type = "버튼";
newNode.Value = "Sixth";
// IE에서 실현 될 수 있습니다
var newnode = document.createElement ( "<input type =/"button/">">);
15 : 오른쪽을 차폐 할 때 -ContextMenu 사건에서 Firefox는 다른 사람들과 다릅니다.
16 : 스타일과 스크립트를 동적으로 추가 할 때 IE 및 기타 브라우저가 다릅니다. 구체적인 점검.
17 : DOM2 및 DOM3의 경우 상황이 더 복잡합니다.