1. 程式人生 > >js獲取寬度

js獲取寬度

瀏覽器兼容 wid css border 邊線 目前 logs 不同 ava

alert(window.screen.width );//瀏覽設備的分辨率(電腦、手機、平板等)
alert(window.screen.availWidth );//瀏覽設備的實際可用寬度(電腦、手機、平板等)
alert(window.innerWidth);//瀏覽器的可用(內部)寬度(包括滾動條等)[ie不支持]
alert(document.documentElement.clientWidth || document.body.clientWidth);//瀏覽器實際的可用文檔寬度【兼容ie】

document.body.clientWidth:

谷歌、火狐:body的實際顯示寬度+padding

ie:body的實際顯示寬度-border

document.body.offsetWidth:

谷歌、火狐:body的實際顯示寬度+padding+border

ie:body的實際顯示寬度

document.body.scrollWidth:

谷歌、火狐:body的實際可用寬度+padding

ie:body的實際可用寬度-border

註:在css設置body為2400px時body的實際寬度為2400+border+padding;而谷歌、火狐為2400px

以下是收集其他作者的總結:

原文鏈接:http://www.cnblogs.com/lshabest/p/6429219.html

1.對於IE9+、chrome、firefox、Opera、Safari:

window.innerHeight瀏覽器窗口的內部高度;

window.innerWidth瀏覽器窗口的內部寬度;

2.對於IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文檔所在窗口的當前高度;

document.documentElement.clientWidth:表示HTML文檔所在窗口的當前寬度;

或者,因為document對象的body屬性對應HTML文檔的<body>標簽,所以也可表示為:

document.body.clientHeight:表示HTML文檔所在窗口的當前高度;

document.body.clientWidth:表示HTML文檔所在窗口的當前寬度;

結論:

document.body.clientWidth/Height:的寬高偏小,高甚至默認200;

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。

所以在不同瀏覽器都實用的的Javascripit方案:

var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight;

二:網頁正文全文寬高

scrollWidth和scrollHeight獲取網頁內容高度和寬度

1.針對IE.Opera:scrollHeight是網頁內容實際高度,可以小於clientHeight;

2.針對NS.firefox:scrollHeight是網頁內容高度,不過最小值是clientHeight;也就是說網頁內容實際高度小於clientHeight的時候,scrollHeight返回clientHeight;

3.瀏覽器兼容代碼:

var w = document.documentElement.scrollWidth || document.body.scrollWidth; var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二:網頁可見區域寬高,包括滾動條等邊線(會隨窗口的顯示大小改變)

1.值: offsetWidth = scrollWidth + 左右滾動條 +左右邊框;

    offsetHeight = scrollHeight + 上下滾動條 + 上下邊框;

2.瀏覽器兼容代碼:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ; var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三:網頁卷去的距離與偏移量

1.scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離;

2.scrollTop:設置或獲取位於給定對象最頂端與窗口中目前可見內容的最左端之間的距離;

3.offsetLeft:設置或獲取位於給定對象相對於版面或由offsetParent屬性指定的父坐標的計算左側位置;

4.offsetTop:設置或獲取位於給定對象相對於版面或由offsetParent屬性指定的父坐標的計算頂端位置;

js獲取寬度