建站
咨詢
售后
建站咨詢
新聞中心
每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop)，scrollHeight(scrollTop)就頭大，根本分不清這幾種的區(qū)別，然而碰到這些已經(jīng)不 值一兩次了，然后每次都要查看一下各自的區(qū)別，才能決定使用哪個。
創(chuàng)新互聯(lián)公司主營石嘴山網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件開發(fā),石嘴山h5微信小程序開發(fā)搭建,石嘴山網(wǎng)站營銷推廣歡迎石嘴山等地區(qū)企業(yè)咨詢
今天特地花了一點時間整理了下各自的區(qū)別，本篇主要以chrome為準，可能各個瀏覽器之間還是有一些區(qū)別，但很多自己還未真正遇到過，還不是很清楚，等以后碰到了類似的兼容性問題，再記錄到這里，這次就chrome瀏覽器中各個屬性的區(qū)別做個記錄，以方便以后的查看
一 clientHeight,offsetHeight,scrollHeight的區(qū)別
clientHeight在各個瀏覽器中基本是一樣的，一致認為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，不包括滾動條，不包括margin，但包括padding，也就是說實際的clientHeight = 當前對象可視區(qū)域的高度 + padding值，如下圖所示 clientHeight = 對象可視區(qū)域高度(300) + 上下padding值(20) = 320
在不同瀏覽器都實用的javascript方案:
var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;
offsetHeight = 當前對象的高度 + 滾動條 + borde值 + padding值，上圖中當前對象的高度和可視區(qū)域高度是一樣的，所以offsetHeight = 300 + padding(20px ) + border(10px) = 330
scrollHeight是網(wǎng)頁內(nèi)容的實際高度，最小值就是clientHeight，也就是說可以是跟clientHeight相等的,但我們假設這樣一個情形，如下代碼所示，父div高度是300px，子div高度是500px，這時候就會形成滾動條,此時父div的結構圖如下：
父div的的scrollHeight 就應該是 scrollHeight = 500px + padding值
因為此時產(chǎn)生了滾動條，此時父div的可視區(qū)域高度為283，當前對象高度也就是父div的高度為300，因此clientHeight = 283px + padding值(20px) = 303px
offsetHeight = 父div的高度(300px) + padding值(20px) + 邊框(10px) = 330px
二 clientTop,offsetTop,scrollTop的區(qū)別
clientTop的理解可以參考clientHeight，clientHeight的的計算方式是當前可視區(qū)域的高度 加上 padding值，那么clientTop就可以理解為當前可視區(qū)域到上一級元素的距離
如上圖所示，clientTop就是5px，大部分情況下，clientTop都是這個border值。
offsetTop是當前對象到body元素的距離，它的計算方式相對復雜，先從上圖進行理解，當前對象指的是border邊框之內(nèi)的區(qū)域，所以計算offsetTop要從當前對象的margin開始，計算公式如下 offsetTop = 當前對象的margin-top + 當前對象所有上級元素的margin-top + 當前對象所有上級元素的border-top，需要注意的是offsetTop是不能進行直接賦值的，只能通過這樣的計算方式得到
scrollTop是當前對象的最頂部到當前對象在當前窗口顯示的范圍內(nèi)的頂邊的距離．即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．
標題名稱：js中不同的height,top的對比
當前鏈接：http://www.5511xx.com/article/cdigegi.html
