江湖人稱“clientHeight”，至于它是啥，相信你也不會(huì)太陌生吧？沒錯(cuò)，這家伙是HTML DOM（文檔對(duì)象模型）中妥妥存在的一個(gè)千斤頂屬性！

當(dāng)你在開發(fā)網(wǎng)頁時(shí)，不知道該如何判斷一個(gè)元素的可見高度時(shí)，那就人性化地使用一下clientHeight吧！顧名思義，它表示的就是一個(gè)元素的可見高度，單位是像素（px）。

那么，這貨有哪些常見的用法呢？我們來瞅瞅~

1. 獲取可見高度

顯而易見，clientHeight最基本的使用就是獲取一個(gè)元素可見的高度。

比如我們有一個(gè)div元素：

這個(gè)div設(shè)置了高度為300px，超過高度部分會(huì)出現(xiàn)滾動(dòng)條。那么，我們?cè)撊绾潍@取這個(gè)div的可見高度呢？

使用JavaScript可以很輕松地獲取：

var height=document.getElementById("myDiv").clientHeight;

這里，我們用JS通過id獲取這個(gè)div元素的對(duì)象，然后用clientHeight獲取它的可見高度，返回的單位是像素(px)。

再來看一個(gè)例子，我們實(shí)現(xiàn)一下一個(gè)常見的需求：當(dāng)屏幕滾動(dòng)到一定程度時(shí)，頂部標(biāo)題欄漸顯。我們先來假設(shè)，標(biāo)題欄已經(jīng)準(zhǔn)備好了，且通過CSS設(shè)置了opacity為0（表示完全透明）。

然后，我們需要實(shí)現(xiàn)的JS邏輯大致分為兩步：

松開鼠標(biāo)或者觸摸屏幕時(shí)，頁面滾動(dòng)到一定程度時(shí)，標(biāo)題欄變得不透明

當(dāng)頁面恢復(fù)到頂部（即scrollTop=0）時(shí)，標(biāo)題欄再變得透明

現(xiàn)在，我們需要獲取頁面滾動(dòng)的高度，然后判斷是否已經(jīng)滾動(dòng)到一定高度了，當(dāng)滿足條件時(shí)，改變標(biāo)題欄的opacity值即可。代碼如下：

window.onscroll = function(){

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

var opa = scrollTop/100;

document.getElementById("header").style.opacity = opa;

}

這里，我們綁定了一個(gè)onscroll事件，表示頁面滾動(dòng)時(shí)，觸發(fā)的相關(guān)操作。然后，通過document.documentElement.scrollTop || document.body.scrollTop獲取頁面滾動(dòng)的高度（跨瀏覽器處理）。

注：為什么要處理跨瀏覽器？因?yàn)椴煌臑g覽器中，document.documentElement.scrollTop和document.body.scrollTop這兩個(gè)對(duì)象的值不同，不能保證兼容性。

接著，我們把獲取到的高度與100進(jìn)行比較，得到透明度所對(duì)應(yīng)的值，最后將標(biāo)題欄的opacity屬性賦值為這個(gè)值即可。

總結(jié)一下：

clientHeight = height + padding – 水平滾動(dòng)條的高度（如果存在）

2. 獲取元素內(nèi)部的高度

除了上面提到的獲取可見高度，clientHeight也可以用于獲取一個(gè)元素內(nèi)部所有DOM節(jié)點(diǎn)的高度之和。

var height = document.getElementById("myDiv").clientHeight;

var lineHeight = parseFloat(window.getComputedStyle(document.getElementById("myDiv")).getPropertyValue('line-height'));

var lineHeightSum = parseInt(height / lineHeight) +1;

到此，我們可以得到內(nèi)部元素的行數(shù)，進(jìn)而獲取每一行的高度，從而得到內(nèi)部元素的總高度。

在實(shí)際項(xiàng)目中，我們可以基于這個(gè)方法來自動(dòng)計(jì)算評(píng)論框、聊天框等元素的高度，以適應(yīng)不同屏幕的展示。

3. 不同box-sizing下的clientHeight計(jì)算

關(guān)于box-sizing的概念，相信各位同學(xué)都不會(huì)太陌生吧。在CSS3中，新增了一個(gè)屬性——box-sizing，用于控制元素大小的計(jì)算方式。其默認(rèn)值為content-box。

既然涉及到box-sizing，那么clientHeight屬性計(jì)算時(shí)，也會(huì)受其影響。

當(dāng)box-sizing為content-box時(shí)：

clientHeight = height + padding - 內(nèi)部滾動(dòng)條的高度（如果存在）

IE9+、Firefox、Chrome、Opera、Safari支持

當(dāng)box-sizing為border-box時(shí)：

clientHeight = height

IE9+、Firefox、Chrome、Opera、Safari支持

那么，我們?cè)撊绾慰焖俸?jiǎn)單地檢測(cè)box-sizing屬性呢？

我們可以通過CSS選擇器控制：若box-sizing為border-box，則把元素的高度設(shè)置為100%會(huì)讓它填充整個(gè)父元素。

比如：box-sizing: border-box; height: 100%;

那么，一篇詳細(xì)介紹了HTML DOM clientHeight屬性的文章，總計(jì)有 1300 字。相信我，只有把它搞明白了，才能讓你在實(shí)現(xiàn)各種需求時(shí)信心百倍哦！ www.yinyiprinting.cn 寧波海美seo網(wǎng)絡(luò)優(yōu)化公司 是網(wǎng)頁設(shè)計(jì)制作，網(wǎng)站優(yōu)化，企業(yè)關(guān)鍵詞排名，網(wǎng)絡(luò)營(yíng)銷知識(shí)和開發(fā)愛好者的一站式目的地，提供豐富的信息、資源和工具來幫助用戶創(chuàng)建令人驚嘆的實(shí)用網(wǎng)站。 該平臺(tái)致力于提供實(shí)用、相關(guān)和最新的內(nèi)容，這使其成為初學(xué)者和經(jīng)驗(yàn)豐富的專業(yè)人士的寶貴資源。