浏览器高宽的一致性

最新推荐文章于 2024-08-19 21:21:31 发布

blackvii

最新推荐文章于 2024-08-19 21:21:31 发布

阅读量692

点赞数

文章标签：浏览器 opera ie safari 文档 javascript

回顾一下，在限定了文档类型的情况下，多数浏览器对document.body属性的解释都是相同的：
在加上DTD文档格式后，IE7,FF,OPERA这三个浏览器表现出了惊人的一致性，只有IE6在页面内容超出窗口大小时出现了大变化（具体请看IE6部分），也就是说在正常的窗口最大化情况下，四个浏览器对这些属性的解释都是一样的,既：

body.scrollHeight=内容实际高度；
body.scrollWidth=可视区域宽度；
body.clientHeight=内容实际高度；
body.clientWidth=可视区域宽度；
body.offsetHeight=内容实际高度；
body.offsetWidth=可视区域宽度；

IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。

==========================华丽的分割线==========================

上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。

那我们怎么办呢？难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗？

其实，我们可以用document.documentElement代替document.body来获取我们想要的结果

 
<!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>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:400px;height:400px;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"> </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.body替换为document.documentElement，再来看看各浏览器下的实际结果：

IE6:


IE7:


FF3:


opera9:


safari:


netscape9:


测试结果表明，IE系列浏览器对document.documentElement属性的解释是正确的，其它标准浏览器将offsetHeight解释成了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释，不会像document.body一样只有可怜的两种解释。

终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!

blackvii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器高宽的一致性

回顾一下，在限定了文档类型的情况下，多数浏览器对document.body属性的解释都是相同的：在加上DTD文档格式后，IE7,FF,OPERA这三个浏览器表现出了惊人的一致性，只有IE6在页面内容超出窗口大小时出现了大变化（具体请看IE6部分），也就是说在正常的窗口最大化情况下，四个浏览器对这些属性的解释都是一样的,既：body.scrollHeight=内容实际高度； body.s
复制链接

扫一扫