深度剖析不同浏览器环境对document.body各属性的解释和影响[学网页网]

深度剖析不同浏览器环境对document.body各属性的解释和影响

深度剖析不同浏览器环境对document.body各属性的解释和影响

作者:qwxren 来源:学网页网录入:qwxren 更新时间:2008-10-28 19:16:09 点击数:

今日因为项目要求，需要用JS做一些弹窗效果，可以随着滚动条滚动。在IE6浏览器下，需要用到JS的HACK，于是从网上摘录了document.body的属性解释，用于IE6弹窗位置的控制，结果是在窗口最大化情况下一切都是好的，而在窗口还原，就是窗口缩小时，控制失效。我也查看了thickbox的代码，发现他是直接禁用IE6的滚动条来解决这个BUG的，就是说，thickbox的开发人员也没有找到很好的办法来解决这个问题，囧啊，真是囧啊～～～～！

不过在研究这个问题的时候，我却对document.body各属性有了更深的了解，而且发现了很多人忽略掉或者根本不会去考虑的问题。

我花了一些时间去测试这些属性在不同浏览器和文档结构环境下的解释。

测试用的是一个页面内容为400x400的文件进行的，因为文件的文档格式会对document.body.scrollTop等属性有不同影响，请参考document.body.scrollTop为0的解决方法的解释，这里也用了这段代码，以使不同浏览器都能取到值。

我还测试了多种文档格式对这些属性的影响，这里用的文档格式是Transitional，我还测试了Strict和无格式时的情况。证实了Strict和Transitional对属性的解释是一致的，而无格式时就会有大不同。所以建议大家在设计时一定要加上文档格式。以下是测试的截图，分别是IE6,IE7,FF,OPERA在窗口最大化和缩小时（窗口还原到出现两个滚动条）的这些属性的值，以下是测试的文档和分析结果：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</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.body.scrollHeight; 
  var scrollWidth = document.body.scrollWidth; 
  var clientWidth = document.body.clientWidth; 
  var clientHeight = document.body.clientHeight; 
  var  offsetWidth = document.body.offsetWidth; 
  var offsetHeight = document.body.offsetHeight; 
  var screenTop = window.screenTop; 
  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(’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:1600px;height:1400px;margin:0 auto;font-size:12px;"> 
<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">&nbsp;</td> 
 <td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td> 
 </tr> 
 <tr> 
 <td align="right">scrollLeft（滚动条卷过的宽）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="scrollLeft" id="scrollLeft" /></td> 
 </tr> 
 <tr> 
 <td align="right">scrollHeight（内容实际高度）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="scrollHeight" id="scrollHeight" /></td> 
 </tr> 
 <tr> 
 <td align="right">scrollWidth（内容实际宽度）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="scrollWidth" id="scrollWidth" /></td> 
 </tr> 
 <tr> 
 <td align="right">clientWidth（可见区域宽）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="clientWidth" id="clientWidth" /></td> 
 </tr> 
 <tr> 
 <td align="right">clientHeight（可见区域高）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="clientHeight" id="clientHeight" /></td> 
 </tr> 
 <tr> 
 <td align="right">offsetWidth（加滚动条宽？）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="offsetWidth" id="offsetWidth" /></td> 
 </tr> 
 <tr> 
 <td align="right">offsetHeight（加滚动条高？）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="offsetHeight" id="offsetHeight" /></td> 
 </tr> 
 <tr> 
 <td align="right">screenTop：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="screenTop" id="screenTop" /></td> 
 </tr> 
 <tr> 
 <td align="right">screenLeft：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="screenLeft" id="screenLeft" /></td> 
 </tr> 
 <tr> 
 <td align="right">sheight（分辨率高）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="sheight" id="sheight" /></td> 
 </tr> 
 <tr> 
 <td align="right">swidth（分分辨率宽）：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="swidth" id="swidth" /></td> 
 </tr> 
 <tr> 
 <td align="right">availHeight：</td> 
 <td>&nbsp;</td> 
 <td><input type="text" name="availHeight" id="availHeight" /></td> 
 </tr> 
 <tr> 
 <td align="right">availWidth：</td> 
 <td>&nbsp;</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>

IE6，无DTD格式声明，窗口最大化：