js 獲取 網頁屏幕高度 窗口高度 元素高度 滾動高度

 常用: JS 獲取瀏覽器窗口大小   
            
             
              
               
                
                 
                  
                  
                    1 
                   
                  
                    2 
                   
                  
                    3 
                   
                  
                    4 
                   
                  
                    5 
                   
                  
                    6 
                   
                  
                    7 
                   
                  
                    8 
                   
                  
                    9 
                   
                  
                    10 
                   
                  
                    11 
                   
                  
                    12 
                   
                  
                    13 
                   
                  
                    14 
                   
                  
                    15 
                   
                  
                    16 
                    
                  
                   
                    
                    // 獲取窗口寬度 
                    
                    
                    if  
                    (window.innerWidth) 
                    
                    
                    winWidth = window.innerWidth; 
                    
                    
                    else  
                    if  
                    ((document.body) && (document.body.clientWidth)) 
                    
                    
                    winWidth = document.body.clientWidth; 
                    
                    
                    // 獲取窗口高度 
                    
                    
                    if  
                    (window.innerHeight) 
                    
                    
                    winHeight = window.innerHeight; 
                    
                    
                    else  
                    if  
                    ((document.body) && (document.body.clientHeight)) 
                    
                    
                    winHeight = document.body.clientHeight; 
                    
                    
                    // 通過深入 Document 內部對 body 進行檢測，獲取窗口大小 
                    
                    
                    if  
                    (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
                    
                    
                    { 
                    
                    
                    winHeight = document.documentElement.clientHeight; 
                    
                    
                    winWidth = document.documentElement.clientWidth; 
                    
                    
                    } 
                    
                    
                 
                
               
              
             
                詳細: 關於獲取各種瀏覽器可見窗口大小: <script> function getInfo() { var s = ""; s = " 網頁可見區域寬：" document.body.clientWidth; s = " 網頁可見區域高：" document.body.clientHeight; s = " 網頁可見區域寬：" document.body.offsetWidth " (包括邊線和滾動條的寬)"; s = " 網頁可見區域高：" document.body.offsetHeight " (包括邊線的寬)"; s = " 網頁正文全文寬：" document.body.scrollWidth; s = " 網頁正文全文高：" document.body.scrollHeight; s = " 網頁被卷去的高(ff)：" document.body.scrollTop; s = " 網頁被卷去的高(ie)：" document.documentElement.scrollTop; s = " 網頁被卷去的左：" document.body.scrollLeft; s = " 網頁正文部分上：" window.screenTop; s = " 網頁正文部分左：" window.screenLeft; s = " 屏幕分辨率的高：" window.screen.height; s = " 屏幕分辨率的寬：" window.screen.width; s = " 屏幕可用工作區高度：" window.screen.availHeight; s = " 屏幕可用工作區寬度：" window.screen.availWidth; s = " 你的屏幕設置是 " window.screen.colorDepth " 位彩色"; s = " 你的屏幕設置 " window.screen.deviceXDPI " 像素/英寸"; //alert (s); } getInfo(); </script> 在我本地測試當中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可獲得，很簡單，很方便。 而在公司項目當中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox則使用 document.documentElement.clientWidth document.documentElement.clientHeight 原來是W3C的標准在作怪啊 <!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高） 而如果沒有定義W3C的標准，則 IE為： document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox為： document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高） Opera為： document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）



HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

 

 

元素的實際高度：document.getElementById("div").offsetHeight
元素的實際寬度：document.getElementById("div").offsetWidth
元素的實際距離左邊界的距離：document.getElementById("div").offsetLeft
元素的實際距離上邊界的距離：document.getElementById("div").offsetTop