1. 程式人生 > >Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度

Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度

pad post 屏幕分辨率 otto 方式 刪除 javascrip block htm

技術分享

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獲取瀏覽器和屏幕各種高度寬度