js獲取瀏覽器和元素對象的尺寸

1.屏幕尺寸

1 window.screen.height               //屏幕分辨率的高
2 window.screen.width                //屏幕分辨率的寬
3 window.screen.availHeight          //屏幕可用工做區的高
4 window.screen.availWidth           //屏幕可用工做區的寬

二、window對象尺寸

1  //獲取窗口中文檔顯示區域的寬度及高度（兼容IE與DOM瀏覽器）：
2  window.innerWidth ? window.innerWidth : document.body.clientWidth;
3  window.innerHeight ? window.innerHeight : document.body.clientHeight;
4  
5 //innerHeight：窗口中文檔顯示區域的高度，不包括菜單欄、工具欄等部分，可讀可寫。IE不支持，IE中body元素的clientHeight與該屬性相同。
6 //innerWidth：窗口中文檔顯示區域的寬度，該屬性可讀可寫。IE不支持，IE中body元素的clientWidth與該屬性相同。clientHeight與clientWidth屬性是隻讀的。

三、元素對象尺寸

• offsetWidth （width+padding+border)當前對象的寬度。

　　style.width也是當前對象的寬度(width+padding+border)。區別：

　　1)style.width返回值除了數字外還帶有單位px；
　　2)如對象的寬度設定值爲百分比寬度,則不管頁面變大仍是變小，style.width都返回此百分比,而offsetWidth則返回在不一樣頁面中對象的寬度值而不是百分比值；
　　3)若是沒有給HTML元素指定過width樣式，則style.width 返回的是空字符串

• offsetHeight :(Height+padding+border)當前對象的高度。

　　style.height也是當前對象的高度(height+padding+border)。區別：

　   1)style.height返回值除了數字外還帶有單位px；
       )如對象的高度設定值爲百分比高度,則不管頁面變高仍是變矮，style.height都返回此百分比,而offsetHeight則返回在不一樣頁面中對象的高度值而不是百分比值；
      3)若是沒有給HTML元素指定過height樣式，則style.height返回的是空字符串

1 scrollWidth     //獲取對象的滾動寬度 
2 scrollHeight    //獲取對象的滾動高度
3 clientWidth     //獲取對象可見內容的寬度，不包括滾動條，不包括邊框
4 clientHeight    //獲取對象可見內容的高度，不包括滾動條，不包括邊框

四、元素對象偏移屬性

1 offsetLeft      //當前對象到偏移參考父元素左邊的距離,不能對其進行賦值,設置對象到父元素左邊的距離用style.left
2 offsetTop       //當前對象到偏移參考父元素頂部的距離,不能對其進行賦值,設置對象到父元素頂部的距離用style.top
3 offsetParent    //當前對象的偏移參考父元素