元素邊框外側(cè)相對(duì)于父容器的邊框外側(cè)的高度

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了臨武免費(fèi)建站歡迎大家使用！

chrome firefox ie
原生

offsetTop 元素邊框外側(cè)相對(duì)于父容器的邊框內(nèi)側(cè)的高度 元素邊框外側(cè)相對(duì)于父容器的邊框內(nèi)側(cè)的高度 元素邊框外側(cè)相對(duì)于父容器的邊框內(nèi)側(cè)的高度
offsetHeight 元素的高度（包括padding和border） 元素的高度（包括padding和border） 元素的高度（包括padding和border）
scrollHeight 元素內(nèi)容實(shí)際高度 元素內(nèi)容實(shí)際高度 元素內(nèi)容實(shí)際高度
clientHeight 元素可見區(qū)域高度（包括padding） 元素可見區(qū)域高度（包括padding） 元素可見區(qū)域高度（包括padding）
clientTop 元素上邊框高度 元素上邊框高度 元素上邊框高度
scrollTop 元素滾動(dòng)了的高度 元素滾動(dòng)了的高度 元素滾動(dòng)了的高度
jquery

offset().top 獲取元素距離文檔頂部高度 獲取元素距離文檔頂部高度 獲取元素距離文檔頂部高度
position().top 元素margin外側(cè)相對(duì)于父容器的邊框內(nèi)側(cè)的高度 元素margin外側(cè)相對(duì)于父容器的邊框內(nèi)側(cè)的高度 元素margin外側(cè)相對(duì)于父容器的邊框內(nèi)側(cè)的高度
height() 元素實(shí)際高度 元素實(shí)際高度 元素實(shí)際高度
innerHeight() 元素高度（包括padding） 元素高度（包括padding） 元素高度（包括padding）
outerHeight() 元素高度（包括padding、border） 元素高度（包括padding、border） 元素高度（包括padding、border）
outerHeight(true) 元素高度（包括padding、border、margin） 元素高度（包括padding、border、margin） 元素高度（包括padding、border、margin）
scrollTop() 元素滾動(dòng)了的高度 元素滾動(dòng)了的高度 元素滾動(dòng)了的高度
窗口、文檔高度

$(window).height() 窗口可見區(qū)域高度 窗口可見區(qū)域高度 窗口可見區(qū)域高度
document.documentElement.clientHeight 文檔可見區(qū)域高度 文檔可見區(qū)域高度 文檔可見區(qū)域高度
window.screen.height 屏幕分辨率高度 屏幕分辨率高度 屏幕分辨率高度
window.screen.availHeight 屏幕可用高度（屏幕高度除去底部任務(wù)欄） 屏幕可用高度（屏幕高度除去底部任務(wù)欄） 屏幕可用高度（屏幕高度除去底部任務(wù)欄）
window.screenY 窗口距離屏幕頂部高度 窗口距離屏幕頂部高度 窗口距離屏幕頂部高度
window.screenTop 窗口距離屏幕頂部高度 無此屬性 窗口距離屏幕頂部高度
$document.height() 文檔高度 文檔高度 文檔高度
document.documentElement.scrollHeight 文檔內(nèi)容高度 文檔內(nèi)容高度 文檔內(nèi)容高度
document.body.scrollHeight body內(nèi)容高度 body內(nèi)容高度 body內(nèi)容高度

注意：
offsetTop 父容器必須設(shè)置了relative或者是absolute，否則會(huì)一直往上找設(shè)置了兩者的祖先元素，chrome和ie最終返回距離文檔頂部的高度，火狐返回的是距離body元素外邊框的高度。
position也是一樣，不過三個(gè)瀏覽器最后都返回的是距離文檔頂部的高度。

通常情況下
$document.height()=document.documentElement.scrollHeight=document.body.scrollHeight=$body.outerHeight(true)

$(window).scrollTop()=$(document).scrollTop()=window.scrollY=document.body.scrollTop=
window.pageYOffset

$el.outerHeight()=$el[0].offsetHeight;

$(window).height()=document.documentElement.clientHeight;

$el.innerHeight()=$el[0].clientHeight;

$el.scrollTop()=$el[0].scrollTop;

在代碼中如果要用到高度的時(shí)候最好使用offsetHeight或者outerHeight()。

窗口滾動(dòng)到底部：窗口高度+滾動(dòng)了的高度=文檔高度。
元素滾動(dòng)到底部：元素可見高度+滾動(dòng)了的高度=元素內(nèi)容高度。

瀏覽器差異
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡(jiǎn)單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時(shí)，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框，scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。

window 和 document使用height代替innerHeight和outerHeight

鼠標(biāo)事件：
clientX 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于當(dāng)前窗口的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條。 
clientY 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于當(dāng)前窗口的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條。 
offsetX 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的 x 坐標(biāo)。 
offsetY 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的 y 坐標(biāo)。 
screenX 設(shè)置或獲取獲取鼠標(biāo)指針位置相對(duì)于用戶屏幕的 x 坐標(biāo)。 
screenY 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于用戶屏幕的 y 坐標(biāo)。 
x 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于父文檔的 x 像素坐標(biāo)(亦即相對(duì)于當(dāng)前窗口)。 
y 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于父文檔的 y 像素坐標(biāo)(亦即相對(duì)于當(dāng)前窗口)。

總結(jié)：
document.documentElement是html元素，document.body是body元素，document.body.scrollHeight就是文檔的總共高度，不是body的總共高度

原生js的 style屬性只能獲取到行內(nèi)的樣式信息，定義在 css中的是無法獲取到的，如果需要獲取的話用 document.defaultView.getComputedStyle(obj,null)[attr];

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁題目：javascript獲取高度-創(chuàng)新互聯(lián)
新聞來源：http://jinyejixie.com/article44/dehdee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站營(yíng)銷、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)