JavaScript中尺寸、座標

測試環境是IE8，Chrome38，Firefox40，下面是全局通用腳本打印代碼

/**
* 打印
*/
function write(str) {
    document.write(str + '<br/>');
}

1、尺寸

在container外面我還套了個container_out，寬度爲1000px，方便演示用，HTML代碼以下：

<div class="container_out">
    <div id="container"></div>
</div>

var container = document.getElementById('container');

/**
* 通用獲取CSS屬性
*/
function getStyle(el, name) {
    if(window.getComputedStyle) {//標準瀏覽器
        return window.getComputedStyle(el, null).getPropertyValue(name);
    }else {//IE瀏覽器
    　　//須要變成駝峯方式
        name = name.replace(/\-(\w)/g, function(word, first) {
            return first.toUpperCase();
        });
        return el.currentStyle.getAttribute(name);
    }
}

1）CSS獲取width、height

 分別在container中，width寫爲200px、10%和不設置。

/**
* 使用CSS,px %,不設置
*/
var cssWidth = getStyle(container, 'width');
write(cssWidth);

在3個瀏覽器中展示的有所不一樣，以下面表格中所示，IE展示的就是比較不同凡響：

	firefox	chrome	IE8
width:200px	200px	200px	200px
width:10%	100px	100px	10%
寬度不設置	956px	956px	auto
display:none;width:200px	200px	200px	200px
display:none;寬度不設置	auto	auto	auto
position:absolute;width:200px	200px	200px	200px
position:absolute;寬度不設置	0px	0px	auto

 

2）offsetWidth、offsetHeight

這是HTMLElement類中的兩個屬性。

offsetWidth = width+padding+border

offsetHeight = height+padding+border

/**
* offsetWidth、offsetHeight
*/
var offsetWidth = container.offsetWidth;
write(offsetWidth);

這裏獲取到的數據是沒有單位的，瀏覽器結果以下：

	firefox	chrome	IE8
width:200px	224	224	224
width:10%	124	124	124
寬度不設置	980	980	980
display:none;width:200px	0	0	0
display:none;寬度不設置	0	0	0
position:absolute;width:200px	224	224	224
position:absolute;寬度不設置	24	24	24

結合公式和第一張表中對應的數據能夠計算出結果

當display:none的時候，獲得的數據都爲0

 

3）innerWidth、innerHeight、outerWidth和outerHeight

這4個window屬性在IE六、IE7和IE8不支持。

在Firefox中，Window.outerWidth和Window.outerHeight返回瀏覽器窗口自己的尺寸。而Window.innerWidth和Window.innerHeight則表示該容器中頁面視圖區的大小（減去邊框寬度）。

在Chrome中，outerWidth.outerHeight與innerWidth，innerHeight返回相同的值，即視口(viewport)大小而非瀏覽器窗口大小。

	firefox	chrome	IE8
innerWidth	1366	1366	undefined
outerWidth	1382	1366	undefined

這裏順便介紹兩個概念：「css像素」、「設備像素」；css像素和設備像素 是容納的關係。在縮放倍數是200%的狀況下，1個css像素容納了4個設備像素

我用chrome瀏覽器，「control+鼠標滾輪」進行放大，放到到200%的時候「innerWidth=683」，正好是原來的一半。

因此window.innerWidth度量單位是css pixels。經測試，「offsetWidth」與「clientWidth」也是css pixels，而「screen.width」是設備像素。

 

4）clientWidth、clientHeight

這兩個是Element類中的屬性。

IE中clientWidth和clientHeight屬性，用於取得元素的可視區域的尺寸，不包含滾動條【innerWidth包含滾動條】、隱藏元素和邊框。在body中設置高度爲2000px，出現滾動條。

/**
* clientWidth、clientHeight
* 標準模式：document.documentElement.clientWidth
* 怪異模式：document.body.clientWidth
*/
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
write('clientWidth:'+clientWidth);

	firefox	chrome	IE8
clientWidth	1349	1349	1345

 

5）scrollWidth、scrollHeight

IE、Opera中：Element.scrollWidth = 網頁內容實際寬度，能夠小於clientWidth

FF：scrollWidth = 網頁內容寬度，不過最小值是clientWidth

在MDN上查看Element.scrollHeight

/**
* scrollWidth、scrollHeight 
*/
var scrollWidth = document.documentElement.scrollWidth;
write('scrollWidth:'+scrollWidth);

	firefox	chrome	IE8
scrollWidth	1349	1349	1345

 

2、座標

#container{
    display: none;
    /*其餘屬性同樣*/
}
.coordinate_out {
    position: relative;
    top:100px;
    left:100px;
    width: 500px;
}
#coordinate{
    left:100px;
    top:250px;
    height:30px;
    width: 30px;
    background: #9ACD32;
    position: absolute;
    border: 2px solid red;
}

接下來的操做會將#container隱藏掉，CSS添加一條屬性：display: none;

1）offsetTop、offsetLeft

<div class="coordinate_out">
    <div id="coordinate"></div>
</div>

即便一個元素沒有被定位，它的HTMLElement.offsetTop和HTMLElement.offsetLeft也是有效的。

它們是相對於offsetParent的距離，一級級向上累加，就獲得相對頁面的座標。

/**
* 累加頁面座標
*/
function offsetSum(node) {
    var top=0, left=0
    while(node) {
        top = top + parseInt(node.offsetTop);
    left = left + parseInt(node.offsetLeft);
    node = node.offsetParent;    
    }
    return {top: top, left: left}
}

	firefox	chrome	IE8
top	350	350	350
left	200	200	200

 

2）node.getBoundingClientRect()

　　node.getBoundingClientRect()方法的返回值是一個包含了一組文本矩形的文本矩形對象。

返回值是一個DOMRect對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合 。

在IE8或者更低瀏覽器版本中，getBoudingClientRect()方法返回的對象中沒有height和width屬性。

1.外面不套relative

<div id="coordinate"></div>

left和top與上面的CSS中定義的同樣。

	firefox	chrome	IE8
top	250	250	250
left	100	100	100
width	30	30	undefined
height	30	30	undefined

 

2.外面套個relative

<div class="coordinate_out">
    <div id="coordinate"></div>
</div>

與上面累加計算的結果一致，能夠看到本身會作計算：

left = left + 父級的left；top = top + 父級的top。

	firefox	chrome	IE8
top	350	350	350
left	200	200	200

 

3）clientLeft、clientTop

Element.clientLeft：一個元素的左邊框的寬度，以像素表示。clientLeft 不包括左外邊距和左內邊距。clientLeft 是隻讀的。

Element.clientTop：一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。clientTop 是隻讀的。

在coordinate中加了border: 2px solid red，三個瀏覽器返回的都是2

/** * clientTop clientLeft */ var client_top = coordinate.clientTop; var client_left = coordinate.clientLeft; write('client-top:'+client_top); write('client-left:'+client_left);

 

4）scrollTop、scrollLeft和pageYOffset、pageXOffset

「外層元素中的內容」高過了「外層元素」自己.當向下拖動滾動條時，有部份內容會隱沒在「外層元素的上邊界」以外。

Element.scrollTop：指的就是這部分「不可見的內容」的高度。

window.pageYOffset：指的是滾動條頂部到網頁頂部的距離，IE六、IE七、IE8不支持此屬性。

我給body設置了高度2000px，而後把滾動條下拉到最下面作測試：

	firefox	chrome	IE8
window.pageYOffset	1392	1317	undefined
document.documentElement.scrollTop	1392	0	1416
document.body.scrollTop	0	1317	0

 

在作IE8的測試的時候，每次返回的都是0，無奈只能寫個onscroll事件，實時添加高度，並在html中新增標籤p：

<p id="scroll"></p>

/**
* pageYOffset scrollTop pageXOffset scrollLeft
*/
var page_YOffset = window.pageYOffset;
var page_escrollTop = document.documentElement.scrollTop;
var page_bscrollTop = document.body.scrollTop;
write('page-YOffset:'+page_YOffset);
write('element-scrollTop:'+page_escrollTop);
write('body-scrollTop:'+page_bscrollTop);
            
window.onscroll = function() {
    var onscroll_top = document.documentElement.scrollTop;
    document.getElementById('scroll').innerHTML = 'scrollTop:' + onscroll_top;;
}

 

經過上面的數據能夠看到，雖然數字不同，可是都是經過不太同樣的屬性獲取到的，因此須要作兼容性的處理：

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;

 

demo下載：

http://download.csdn.net/detail/loneleaf1/9132279

 

參考資料：

http://www.jxbh.cn/newshow.asp?id=1363&tag=2  跨瀏覽器窗口大小兼容js及innerWidth、innerHeight、outerWidth和outerHeight屬性

http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/  獲取元素CSS值之getComputedStyle方法熟悉

http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html   JS中關於clientWidth offsetWidth scrollWidth 等的含義

《JavaScript框架設計》 人民郵電出版社 司徒正美

http://javascript.info/tutorial/coordinates   Coordinates

http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/    CSSOM視圖模式(CSSOM View Module)相關整理

http://www.hujuntao.com/web/javascript/something-about-javascript-scrolltop.html   關於javascript scrollTop那點事

http://www.penglig.com/post-322.html   瀏覽器模式與窗口 scrollTop 的兼容性問題總結

http://www.javashuo.com/article/p-fcejdcde-bk.html   理解flexible.js所需的viewport知識