一：網頁可見區域寬高，不包括工具欄和滾動條（瀏覽器窗口可視區域大小）
1.對于IE9+、chrome、firefox、Opera、Safari：
window.innerHeight瀏覽器窗口的內部高度；
window.innerWidth瀏覽器窗口的內部寬度；
2.對于IE8.7.6.5:
document.documentElement.clientHeight:表示HTML文檔所在窗口的當前高度；
document.documentElement.clientWidth:表示HTML文檔所在窗口的當前寬度；
或者，因為document對象的body屬性對應HTML文檔的<body>標簽，所以也可表示為：
document.body.clientHeight：表示HTML文檔所在窗口的當前高度；
document.body.clientWidth：表示HTML文檔所在窗口的當前寬度；
結論：
document.body.clientWidth/Height：的寬高偏小，高甚至默認200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。
所以在不同瀏覽器都實用的的Javascripit方案：
var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;
二：網頁正文全文寬高
scrollWidth和scrollHeight獲取網頁內容高度和寬度
1.針對IE.Opera：scrollHeight是網頁內容實際高度，可以小于clientHeight;
2.針對NS.firefox：scrollHeight是網頁內容高度，不過最小值是clientHeight;也就是說網頁內容實際高度小于clientHeight的時候，scrollHeight返回clientHeight；
3.瀏覽器兼容代碼：
var w = document.documentElement.scrollWidth || document.body.scrollWidth;var h = document.documentElement.scrollHeight || document.body.scrollHeight;
二：網頁可見區域寬高，包括滾動條等邊線（會隨窗口的顯示大小改變）
1.值： offsetWidth = scrollWidth + 左右滾動條 +左右邊框；
offsetHeight = scrollHeight + 上下滾動條 + 上下邊框；
2.瀏覽器兼容代碼：
var w = document.documentElement.offsetWidth || document.body.offsetWidth ;var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
三：網頁卷去的距離與偏移量
1.scrollLeft:設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離；
2.scrollTop:設置或獲取位于給定對象最頂端與窗口中目前可見內容的最左端之間的距離；
3.offsetLeft:設置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標的計算左側位置；
4.offsetTop:設置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標的計算頂端位置；
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
