document.documentElement 으로 document.body 를 대체 하 는 원인 분석

7952 단어 document.documentElement
IE6 는 페이지 내용 이 창 을 초과 하 는 시간 에 너비 속성 scrollWidth,client Width,offset Width 를 모두 내용 의 실제 너비 로 해석 합 니 다.지난번 테스트 는 document.body 속성 이 우리 에 게 예상 한 결 과 를 되 돌려 주지 않 는 다 는 것 을 설명 했다.예 를 들 어 우 리 는 document.body.client Height 로'페이지 가 보 이 는 영역 높이'를 얻 으 려 고 했 지만 실제 적 으로'페이지 의 실제 내용 높이'를 되 돌려 주 었 다.그럼 우리 어 떡 하지?문서 DTD 형식 을 추가 하면'보 이 는 영역 높이'와'내용 실제 너비'등 속성 을 더 이상 찾 을 수 없 습 니까?
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>documentElement</title> 
<style type="text/css"> 
body{margin:0;padding:0;font:12px/150% arial;} 
</style> 
<script type="text/javascript"> 
function a() { 
var scrollTop; 
var scrollLeft; 
if (typeof window.pageYOffset != 'undefined') { 
scrollTop = window.pageYOffset; 
scrollLeft = window.pageXOffset; 
} 
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
scrollTop = document.documentElement.scrollTop; 
scrollLeft = document.documentElement.scrollLeft; 
} 
else if (typeof document.body != 'undefined') { 
scrollTop = document.body.scrollTop; 
scrollLeft = document.body.scrollLeft; 
} 
var scrollHeight = document.documentElement.scrollHeight; 
var scrollWidth = document.documentElement.scrollWidth; 
var clientWidth = document.documentElement.clientWidth; 
var clientHeight = document.documentElement.clientHeight; 
var offsetWidth = document.documentElement.offsetWidth; 
var offsetHeight = document.documentElement.offsetHeight; 
var screenTop = window.screenTop; 
var screenBottom = window.screenBottom; 
var screenLeft = window.screenLeft; 
var sheight = window.screen.height; 
var swidth = window.screen.width; 
var availHeight = window.screen.availHeight; 
var availWidth = window.screen.availWidth; 
document.getElementById('scrollTop').value = scrollTop; 
document.getElementById('scrollLeft').value = scrollLeft; 
document.getElementById('scrollHeight').value = scrollHeight; 
document.getElementById('scrollWidth').value = scrollWidth; 
document.getElementById('clientWidth').value = clientWidth; 
document.getElementById('clientHeight').value = clientHeight; 
document.getElementById('offsetWidth').value = offsetWidth; 
document.getElementById('offsetHeight').value = offsetHeight; 
document.getElementById('screenTop').value = screenTop; 
document.getElementById('screenBottom').value = screenBottom; 
document.getElementById('screenLeft').value = screenLeft; 
document.getElementById('sheight').value = sheight; 
document.getElementById('swidth').value = swidth; 
document.getElementById('availHeight').value = availHeight; 
document.getElementById('availWidth').value = availWidth; 
} 
</script> 
</head> 
<body> 
<div style="width:420px;height:470px;margin:0 auto;font-size:12px; border:solid 5px #ccc;"> 
<center> 
<table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;"> 
<tr> 
<td width="187" align="right">scrollTop（       ）：</td> 
<td width="10"> </td> 
<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td> 
</tr> 
<tr> 
<td align="right">scrollLeft（       ）：</td> 
<td> </td> 
<td><input type="text" name="scrollLeft" id="scrollLeft" /></td> 
</tr> 
<tr> 
<td align="right">scrollHeight（      ）：</td> 
<td> </td> 
<td><input type="text" name="scrollHeight" id="scrollHeight" /></td> 
</tr> 
<tr> 
<td align="right">scrollWidth（      ）：</td> 
<td> </td> 
<td><input type="text" name="scrollWidth" id="scrollWidth" /></td> 
</tr> 
<tr> 
<td align="right">clientWidth（     ）：</td> 
<td> </td> 
<td><input type="text" name="clientWidth" id="clientWidth" /></td> 
</tr> 
<tr> 
<td align="right">clientHeight（     ）：</td> 
<td> </td> 
<td><input type="text" name="clientHeight" id="clientHeight" /></td> 
</tr> 
<tr> 
<td align="right">offsetWidth（     ？）：</td> 
<td> </td> 
<td><input type="text" name="offsetWidth" id="offsetWidth" /></td> 
</tr> 
<tr> 
<td align="right">offsetHeight（     ？）：</td> 
<td> </td> 
<td><input type="text" name="offsetHeight" id="offsetHeight" /></td> 
</tr> 
<tr> 
<td align="right">screenTop：</td> 
<td> </td> 
<td><input type="text" name="screenTop" id="screenTop" /></td> 
</tr> 
<tr> 
<td align="right">screenBottom：</td> 
<td> </td> 
<td><input type="text" name="screenBottom" id="screenBottom" /></td> 
</tr> 
<tr> 
<td align="right">screenLeft：</td> 
<td> </td> 
<td><input type="text" name="screenLeft" id="screenLeft" /></td> 
</tr> 
<tr> 
<td align="right">sheight（    ）：</td> 
<td> </td> 
<td><input type="text" name="sheight" id="sheight" /></td> 
</tr> 
<tr> 
<td align="right">swidth（     ）：</td> 
<td> </td> 
<td><input type="text" name="swidth" id="swidth" /></td> 
</tr> 
<tr> 
<td align="right">availHeight：</td> 
<td> </td> 
<td><input type="text" name="availHeight" id="availHeight" /></td> 
</tr> 
<tr> 
<td align="right">availWidth：</td> 
<td> </td> 
<td><input type="text" name="availWidth" id="availWidth" /></td> 
</tr> 
</table> 
<a href="javascript:a()" style="height:20px;display:block;">     400PX，         </a> 
</center> 
</div> 
</body> 
</html>
사실,우 리 는 document.document Element 을 document.body 대신 document.body 로 우리 가 원 하 는 결 과 를 얻 을 수 있 습 니 다.body 를 document.document Element 으로 바 꾸 고 각 브 라 우 저 에서 의 실제 결 과 를 살 펴 볼 수 있 습 니 다.ii 테스트 결과,IE 시리즈 탐색 기 가 document.document Element 속성 에 대한 설명 이 정확 합 니 다.다른 표준 브 라 우 저 는 offset Height 를 scrollHeight 로 해석 했다.불 여우 와 넷 스 케 이 프 는 이 두 가지 속성 을 바 꾸 었 다.그러나 전체적으로 말 하면 각 속성 은 해당 하 는 해석 이 있 을 수 있 고 document.body 처럼 불쌍 한 두 가지 해석 만 있 지 는 않 을 것 이다.드디어 JS 방법 으로 다양한 페이지 의 하 이 라이트 속성 을 얻 을 수 있 게 되 었 습 니 다^ ^!
셸 for 순환 및 배열 응용 소개
링크 ux 셸 배열 깊이 학습 이해

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage