關(guān)于獲取各種瀏覽器可見窗口大小的一點(diǎn)點(diǎn)研究
<script>
function getInfo()
{
var s = "";
s = " 網(wǎng)頁可見區(qū)域?qū)挘? document.body.clientWidth;
s = " 網(wǎng)頁可見區(qū)域高：" document.body.clientHeight;
s = " 網(wǎng)頁可見區(qū)域?qū)挘? document.body.offsetWidth " (包括邊線和滾動(dòng)條的寬)";
s = " 網(wǎng)頁可見區(qū)域高：" document.body.offsetHeight " (包括邊線的寬)";
s = " 網(wǎng)頁正文全文寬：" document.body.scrollWidth;
s = " 網(wǎng)頁正文全文高：" document.body.scrollHeight;
s = " 網(wǎng)頁被卷去的高(ff)：" document.body.scrollTop;
s = " 網(wǎng)頁被卷去的高(ie)：" document.documentElement.scrollTop;
s = " 網(wǎng)頁被卷去的左：" document.body.scrollLeft;
s = " 網(wǎng)頁正文部分上：" window.screenTop;
s = " 網(wǎng)頁正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的寬：" window.screen.width;
s = " 屏幕可用工作區(qū)高度：" window.screen.availHeight;
s = " 屏幕可用工作區(qū)寬度：" window.screen.availWidth;
s = " 你的屏幕設(shè)置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕設(shè)置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在本地測試當(dāng)中：
- 在IE慨飘、FireFox译荞、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡單圈膏，很方便篙骡。
而在公司項(xiàng)目當(dāng)中： - Opera仍然使用
document.body.clientWidth
document.body.clientHeight - 可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標(biāo)準(zhǔn)在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標(biāo)記的話 在IE中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?br>
document.documentElement.clientHeight ==> 可見區(qū)域高度
- 在FireFox中：
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?br> document.documentElement.clientHeight ==> 可見區(qū)域高度 - 在Opera中：
document.body.clientWidth ==> 可見區(qū)域?qū)挾?br> document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
而如果沒有定義W3C的標(biāo)準(zhǔn)慎皱，則
- IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0 - FireFox為：
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高） - Opera為：
document.documentElement.clientWidth ==> 頁面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對(duì)象高度（即BODY對(duì)象高度加上Margin高）
注：
Document 對(duì)象
當(dāng)瀏覽器載入HTML 文檔茫多，它就會(huì)成為 Document 對(duì)象忽刽。
Document對(duì)象是HTML文檔的根節(jié)點(diǎn)。
Document對(duì)象使我們可以從腳本中對(duì) HTML 頁面中的所有元素進(jìn)行訪問今膊。
提示：Document 對(duì)象是 Window 對(duì)象的一部分伞剑，可通過 window.document 屬性對(duì)其進(jìn)行訪問。
通過document訪問頁面內(nèi)的元素恕刘，document.documentElement返回html dom中的root 節(jié)點(diǎn) 即<html>，document.body返回html dom中的body節(jié)點(diǎn) 即<body>坷澡。
所以document.documentElement是<html></html>元素频敛，document.body是<body></body>元素馅扣。如果發(fā)現(xiàn)兩個(gè)高度不一樣差油，是css設(shè)置的問題，你的html高度不一定高于body厌殉。
用body查看公罕，其中clientHeight即為body的css高度
用documentElement楼眷，其中clientHeight即為html的css高度
網(wǎng)上很多說document.documentElement.clientHeight或者document.body.clientHeight為可見高度罐柳，其實(shí)這要看body或者h(yuǎn)tml標(biāo)簽的css怎么設(shè)的张吉，當(dāng)body的height（css設(shè)定）一開始就和scrollHeight相等時(shí)催植，是不能作為可見高度的。
