Javascript、Jquery擷取瀏覽器和螢幕各種高度寬度

標籤：工作區   img   blog   padding   解析度   tco   content   寬度   bottom   

 

Javascript:

 

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高）

 

 

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

 

 

jquery擷取html元素的絕對位置座標和相對父元素的位置座標方法：
絕對位置座標：
$("#elem").offset().top
$("#elem").offset().left
相對父元素的位置座標：
$("#elem").position().top
$("#elem").position().left

另：
static(預設):預設定位方式。
relative(相對定位):在static的基礎上，相對元素本來的位置變化，通過設定top,bottom,left,right實現。
absolute(絕對位置):是相對父元素來說的，如果父元素中有relative，那麼該元素的位置是經過計算後的結果。即absolute定位的參照物是“上一個定位過的父元素(static不算)”。絕對位置會使元素從文檔流中被刪除。
fixed(固定定位):fixed定位的參照物總是當前的文檔。利用fixed定位，很容易讓一個div定位在瀏覽器文檔的左上，右上等方位。

Javascript、Jquery擷取瀏覽器和螢幕各種高度寬度