web下的高度、位置
屏幕、瀏覽器、頁面的高度寬度
NARUTOne
相信各位web開發(fā)獅們，在項(xiàng)目中為了搭建漂亮酷炫的頁面，經(jīng)常會(huì)遇到需要獲取各種高寬吧，屏幕的、瀏覽器的、頁面的。應(yīng)該也有些人對(duì)這些各種高寬有過疑惑吧。這篇文章我將簡(jiǎn)單介紹下這些寬高，發(fā)發(fā)身份證,最后加上點(diǎn)元素大小及位置介紹O(∩_∩)O~。
老規(guī)矩（參考鏈接）：http://www.cnblogs.com/polk6/p/5051935.html
屏幕
設(shè)備的可視大小。
screen.height ：屏幕高度。
screen.width ：屏幕寬度。
screen.availHeight ：屏幕可用高度。即屏幕高度減去上下任務(wù)欄后的高度，可表示為軟件最大化時(shí)的高度。
screen.availWidth ：屏幕可用寬度。即屏幕寬度減去左右任務(wù)欄后的寬度，可表示為軟件最大化時(shí)的寬度。
任務(wù)欄高/寬度 ：可通過屏幕高/寬度 減去 屏幕可用高/寬度得出。如：任務(wù)欄高度 = screen.height - screen.availHeight 。
瀏覽器
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網(wǎng)頁面積，又叫做viewport（視口）。
window.outerHeight ：瀏覽器高度。
window.outerWidth ：瀏覽器寬度。
window.innerHeight ：瀏覽器內(nèi)頁面可用高度；此高度包含了水平滾動(dòng)條的高度(若存在)。可表示為瀏覽器當(dāng)前高度去除瀏覽器邊框、工具條后的高度。
window.innerWidth ：瀏覽器內(nèi)頁面可用寬度；此寬度包含了垂直滾動(dòng)條的寬度(若存在)。可表示為瀏覽器當(dāng)前寬度去除瀏覽器邊框后的寬度。
工具欄高/寬度 ：包含了地址欄、書簽欄、瀏覽器邊框等范圍。如：高度，可通過瀏覽器高度 - 頁面可用高度得出，即：window.outerHeight - window.innerHeight。
body頁面
一張網(wǎng)頁的全部面積，就是它的大小。通常情況下，網(wǎng)頁的大小由內(nèi)容和CSS樣式表決定。
很顯然，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動(dòng)條），那么網(wǎng)頁的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動(dòng)瀏覽器窗口，可以顯示出網(wǎng)頁的各個(gè)部分。
body.offsetHeight ：body總高度。
body.offsetWidth ：body總寬度。出現(xiàn)滾動(dòng)條后，與scrollHeight一致。
body.clientHeight ：body展示的高度；表示body在瀏覽器內(nèi)顯示的區(qū)域高度。
body.clientWidth ：body展示的寬度；表示body在瀏覽器內(nèi)顯示的區(qū)域?qū)挾取?/p>
滾動(dòng)條高度/寬度 ：如高度，可通過瀏覽器內(nèi)頁面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。
合并到一張圖
進(jìn)階篇 —— 元素大小、位置
盒子模型
CSS3中新增了一種盒模型計(jì)算方式：box-sizing熟悉。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計(jì)算元素寬高的區(qū)別如下：
- content-box（默認(rèn)）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
- padding-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
- border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
元素的決對(duì)位置
網(wǎng)頁元素的絕對(duì)位置，指該元素的左上角相對(duì)于整張網(wǎng)頁左上角的坐標(biāo)。這個(gè)絕對(duì)位置要通過計(jì)算才能得到。
首先，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離。所以，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對(duì)坐標(biāo)。
下面兩個(gè)函數(shù)可以用來獲取絕對(duì)位置的橫坐標(biāo)和縱坐標(biāo)。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
由于在表格和iframe中，offsetParent對(duì)象未必等于父容器，所以上面的函數(shù)對(duì)于表格和iframe中的元素不適用。
獲取網(wǎng)頁元素的相對(duì)位置
網(wǎng)頁元素的相對(duì)位置，指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。
有了絕對(duì)位置以后，獲得相對(duì)位置就很容易了，只要將絕對(duì)坐標(biāo)減去頁面的滾動(dòng)條滾動(dòng)的距離就可以了。滾動(dòng)條滾動(dòng)的垂直距離，是document對(duì)象的scrollTop屬性；滾動(dòng)條滾動(dòng)的水平距離是document對(duì)象的scrollLeft屬性。
對(duì)上一節(jié)中的兩個(gè)函數(shù)進(jìn)行相應(yīng)的改寫：
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}
return actualTop-elementScrollTop;
}
scrollTop和scrollLeft屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對(duì)位置。另外，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。
獲取元素位置的快速方法
除了上面的函數(shù)以外，還有一種快速方法，可以立刻獲得網(wǎng)頁元素的位置。
那就是使用getBoundingClientRect()方法。它返回一個(gè)對(duì)象，其中包含了left、right、top、bottom四個(gè)屬性，分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離。
所以，網(wǎng)頁元素的相對(duì)位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滾動(dòng)距離，就可以得到絕對(duì)位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
基礎(chǔ)知識(shí)
在一些復(fù)雜的頁面中經(jīng)常會(huì)用JavaScript處理一些DOM元素的動(dòng)態(tài)效果，這種時(shí)候我們經(jīng)常會(huì)用到一些元素位置和尺寸的計(jì)算，瀏覽器兼容性問題也是不可忽略的一部分，要想寫出預(yù)想效果的JavaScript代碼，我們需要了解一些基本知識(shí)。
clientHeight和clientWidth
- 用于描述元素內(nèi)尺寸，是指 元素內(nèi)容+內(nèi)邊距 大小，不包括邊框（IE下實(shí)際包括）、外邊距、滾動(dòng)條部分
- 如果沒有滾動(dòng)條，即為元素設(shè)定的高度和寬度，如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動(dòng)條的寬高
offsetHeight和offsetWidth
- 用于描述元素外尺寸，是指 元素內(nèi)容+內(nèi)邊距+邊框，不包括外邊距和滾動(dòng)條部分及溢出部分
- 該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無關(guān)，只和本來設(shè)定的border以及width和height有關(guān)
clientTop和clientLeft
- 返回內(nèi)邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框?qū)挾?/li>
offsetTop和offsetLeft
- 表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對(duì)象）左上角的距離
offsetParent
- 是指元素最近的定位（relative,absolute）祖先元素，遞歸上溯，找不到這樣一個(gè)父級(jí)元素，那么當(dāng)前元素的offsetParent就是body元素，如果沒有祖先元素是定位的話，會(huì)返回null
scrollWidth和scrollHeight
- 是元素的內(nèi)容區(qū)域加上內(nèi)邊距加上溢出尺寸，當(dāng)內(nèi)容正好和內(nèi)容區(qū)域匹配沒有溢出時(shí)，這些屬性與clientWidth和clientHeight相等
- ，需要注意的是，當(dāng)元素其中內(nèi)容沒有超過其高度或者寬度的時(shí)候，該屬性是取不到的。
scrollLeft和scrollTop
- 是指元素滾動(dòng)條位置，它們是可寫的
- 元素被卷起的高度和寬度。
獲取樣式
- obj.style.*屬性
- obj.currentstyle（IE）
- getComputedStyle(IE之外的瀏覽器)。
event對(duì)象下的位置
clientX和clientY
這對(duì)屬性是當(dāng)事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器（可視區(qū)）的坐標(biāo)，即瀏覽器左上角坐標(biāo)的（0,0），該屬性以瀏覽器左上角坐標(biāo)為原點(diǎn)，計(jì)算鼠標(biāo)點(diǎn)擊位置距離其左上角的位置，
不管瀏覽器窗口大小如何變化，都不會(huì)影響點(diǎn)擊位置的坐標(biāo)。
screenX和screenY
- 是事件發(fā)生時(shí)鼠標(biāo)相對(duì)于屏幕的坐標(biāo)，以設(shè)備屏幕的左上角為原點(diǎn)，事件發(fā)生時(shí)鼠標(biāo)點(diǎn)擊的地方即為該點(diǎn)的screenX和screenY值
offsetX 和 offsetY
這一對(duì)屬性是指當(dāng)事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊位置相對(duì)于該事件源的位置，即點(diǎn)擊該div，以該div左上角為原點(diǎn)來計(jì)算鼠標(biāo)點(diǎn)擊位置的坐標(biāo)
Firefox不支持該屬性，F(xiàn)irefox中與此屬性相對(duì)應(yīng)的概念是，event.layerX和event.layerY,所以需要兼容瀏覽器時(shí)，獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于事件源的坐標(biāo)的兼容寫法為var disX=event.offsetX||event.layerX
pageX和pageY
- 該屬性是事件發(fā)生時(shí)鼠標(biāo)點(diǎn)擊位置相對(duì)于頁面的位置。
- 通常瀏覽器窗口沒有出現(xiàn)滾動(dòng)條時(shí)，該屬性和event.clientX及event.clientY是等價(jià)的，但是當(dāng)瀏覽器出現(xiàn)滾動(dòng)條的時(shí)候，pageX通常會(huì)大于clientX，因?yàn)轫撁孢€存在被卷起來的部分的寬度和高度，
