看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
?
每次用JS獲取頁面的高寬時總都是相當的揪心，同一個屬性在不同的瀏覽器或不同的W3C標準下所表示的意思都不盡相同。以下就針對頁面的實際高寬和可見區域做個總結，以便大家查閱！
1.?在W3C標準的情況下
W3C標準頁面，即在HTML代碼頭部加入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?
在IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==>?可見區域寬度
document.documentElement.clientHeight ==>?可見區域高度
?
在FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==>?可見區域寬度
document.documentElement.clientHeight ==>?可見區域高度
?
在Opera中：
document.body.clientWidth ==>?可見區域寬度
document.body.clientHeight ==>?可見區域高度
document.documentElement.clientWidth ==>?頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==>?頁面對象高度（即BODY對象高度加上Margin高）
2.?在無W3C標準的情況下
即在HTML代碼頭部無
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?
在IE中：
document.body.clientWidth ==>?可見區域寬度
document.body.clientHeight ==>?可見區域高度
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
?
在FireFox中：
document.body.clientWidth ==>?可見區域寬度
document.body.clientHeight ==>?可見區域高度
document.documentElement.clientWidth ==>?頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==>?頁面對象高度（即BODY對象高度加上Margin高）
?
在Opera中：
document.body.clientWidth ==>?可見區域寬度
document.body.clientHeight ==>?可見區域高度
document.documentElement.clientWidth ==>?頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==>?頁面對象高度（即BODY對象高度加上Margin高）
3.?附錄?-?頁面高寬的其他相關屬性
<script>
var s = '';
s += "\r\n?網頁可見區域寬："+ document.body.clientWidth;
s += "\r\n?網頁可見區域高："+ document.body.clientHeight;
s += "\r\n?網頁可見區域寬："+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
s += "\r\n?網頁可見區域高："+ document.body.offsetHeight + " (包括邊線的寬)";
s += "\r\n?網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n?網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n?網頁被卷去的高(ff)："+ document.body.scrollTop;
s += "\r\n?網頁被卷去的高(ie)："+ document.documentElement.scrollTop;
s += "\r\n?網頁被卷去的左："+ document.body.scrollLeft;
s += "\r\n?網頁正文部分上："+ window.screenTop;
s += "\r\n?網頁正文部分左："+ window.screenLeft;
s += "\r\n?屏幕分辨率的高："+ window.screen.height;
s += "\r\n?屏幕分辨率的寬："+ window.screen.width;
s += "\r\n?屏幕可用工作區高度："+ window.screen.availHeight;
s += "\r\n?屏幕可用工作區寬度："+ window.screen.availWidth;
s += "\r\n?你的屏幕設置是?"+ window.screen.colorDepth +"?位彩色";
s += "\r\n?你的屏幕設置?"+ window.screen.deviceXDPI +"?像素/英寸";
alert(s);
</script>
?
總結
以上是生活随笔為你收集整理的看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript 动态加载脚本和样式
- 下一篇： js之事件冒泡和事件捕获