關於offsetWidth innerWidth的使用

最近因為有使用到offsetWidth 和innerWidth,剛開始以為這兩個屬性在jq何js之中是可以通用的，誰知道在js中使用innerWidth時，發現如果對頁面元素使用它時，發現出來的是undefined,通過查詢資料得知，該屬性只能對window使用，也就是對窗口使用，所以在此弄一篇隨便來記錄一下。當然了，jq也不能直接使用offsetWidth，要先轉為為dom對象才可以使用，列入$("#button")[0].offsetWidth;

以下是一些基本的屬性：

Javascript:

alert(document.body.clientWidth);        //網頁可見區域寬(body)

alert(document.body.clientHeight);       //網頁可見區域高(body)

alert(document.body.offsetWidth);       //網頁可見區域寬(body)，包括border、margin等

alert(document.body.offsetHeight);      //網頁可見區域寬(body)，包括border、margin等

alert(document.body.scrollWidth);        //網頁正文全文寬，包括有滾動條時的未見區域

alert(document.body.scrollHeight);       //網頁正文全文高，包括有滾動條時的未見區域

alert(document.body.scrollTop);           //網頁被卷去的Top(滾動條)

alert(document.body.scrollLeft);           //網頁被卷去的Left(滾動條)

alert(window.screenTop);                     //瀏覽器距離Top

alert(window.screenLeft);                     //瀏覽器距離Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的寬

alert(window.screen.availHeight);          //屏幕可用工作區的高

alert(window.screen.availWidth);           //屏幕可用工作區的寬

 

Jquery:

alert($(window).height());                           //瀏覽器當前窗口可視區域高度

alert($(document).height());                        //瀏覽器當前窗口文檔的高度

alert($(document.body).height());                //瀏覽器當前窗口文檔body的高度

alert($(document.body).outerHeight(true));  //瀏覽器當前窗口文檔body的總高度 包括border padding margin

alert($(window).width());                            //瀏覽器當前窗口可視區域寬度

alert($(document).width());                        //瀏覽器當前窗口文檔對象寬度

alert($(document.body).width());                //瀏覽器當前窗口文檔body的寬度

alert($(document.body).outerWidth(true));  //瀏覽器當前窗口文檔body的總寬度 包括border padding margin