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

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

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

1. 獲取可見高度

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

比如我們有一個div元素：

這個div設置了高度為300px，超過高度部分會出現滾動條。那么，我們該如何獲取這個div的可見高度呢？

使用JavaScript可以很輕松地獲?。?p>

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

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

再來看一個例子，我們實現一下一個常見的需求：當屏幕滾動到一定程度時，頂部標題欄漸顯。我們先來假設，標題欄已經準備好了，且通過CSS設置了opacity為0（表示完全透明）。

然后，我們需要實現的JS邏輯大致分為兩步：

松開鼠標或者觸摸屏幕時，頁面滾動到一定程度時，標題欄變得不透明

當頁面恢復到頂部（即scrollTop=0）時，標題欄再變得透明

現在，我們需要獲取頁面滾動的高度，然后判斷是否已經滾動到一定高度了，當滿足條件時，改變標題欄的opacity值即可。代碼如下：

window.onscroll = function(){

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

var opa = scrollTop/100;

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

}

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

注：為什么要處理跨瀏覽器？因為不同的瀏覽器中，document.documentElement.scrollTop和document.body.scrollTop這兩個對象的值不同，不能保證兼容性。

接著，我們把獲取到的高度與100進行比較，得到透明度所對應的值，最后將標題欄的opacity屬性賦值為這個值即可。

總結一下：

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

2. 獲取元素內部的高度

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

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

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

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

到此，我們可以得到內部元素的行數，進而獲取每一行的高度，從而得到內部元素的總高度。

在實際項目中，我們可以基于這個方法來自動計算評論框、聊天框等元素的高度，以適應不同屏幕的展示。

3. 不同box-sizing下的clientHeight計算

關于box-sizing的概念，相信各位同學都不會太陌生吧。在CSS3中，新增了一個屬性——box-sizing，用于控制元素大小的計算方式。其默認值為content-box。

既然涉及到box-sizing，那么clientHeight屬性計算時，也會受其影響。

當box-sizing為content-box時：

clientHeight = height + padding - 內部滾動條的高度（如果存在）

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

當box-sizing為border-box時：

clientHeight = height

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

那么，我們該如何快速簡單地檢測box-sizing屬性呢？

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

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

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