瀏覽器窗口可視區域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對於IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 瀏覽器窗口的內部高度
• window.innerWidth - 瀏覽器窗口的內部寬度
二、對於 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
• document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
或者
Document對象的body屬性對應HTML文檔的<body>標籤
• document.body.clientHeight
• document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight;網頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網頁內容實際高度，可以小於 clientHeight。
二、針對NS、FF:
scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;注意:區分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內容實際佔用的高度和寬度。
網頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;網頁捲去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 。
offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置 。
注意:
1. 區分大小寫
2. offsetParent：佈局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body
js的DOM（瀏覽器、網頁尺寸）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,