CSS中的高度

標籤：blog   http   io   ar   使用   sp   strong   on   div   

https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight

Element.clientHeight是唯讀屬性，以像素為單位，返回的是元素內部的高度，包括padding但是不包含水平捲軸的高度，元素邊框(border)，及margin

clientHeight 可以計算為：CSS height+ CSS padding – 水平捲軸的高度(如果存在水平捲軸)

注意：這個屬性會四捨五入為整數，如果你需要含有小數的值，使用element.getBoundingClientRect()

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

 

HTMLElement.offsetHeight  唯讀屬性， 以像素為單位，整數， 表示元素的高度包含垂直padding和border。

通常情況下， 一個元素的offsetHeight的計算 包含這個元素的borders,元素垂直方向上的padding，這個元素的水平捲軸（如果有並且顯示了）和這個元素的CSS高度。

對於document的body對象，將所有的線性內容的總高度替換掉元素的CSS height來計算。對於floated元素extending below other linear content的會被忽略。

注意：這個屬性會四捨五入為整數，如果你需要含有小數的值，使用element.getBoundingClientRect()

 

上面的圖片顯示了一個捲軸和offsetHeight。然而，非滾動的元素可能有比可以看到的內容更大的offsetHeight的值。這類的元素一般會包含滾動的元素，因此，非滾動的元素可能是完全或者部分可視，主要依賴於滾動的包含元素的scrollTop的設定。

 

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight

Element.scrollHeight 是一個唯讀屬性，表示一個元素的高度包含以為溢出overflow在螢幕上不可見的內容。ScrollHeight的值等於元素顯示所有內容不使用垂直捲軸的clientHeight。它包含元素的padding但是不包含margin。

注意：這個屬性會四捨五入為整數，如果你需要含有小數的值，使用element.getBoundingClientRect()

 

 

應用執行個體：檢測一個元素是否被滾動到底。

element.scrollHeight - element.scrollTop === element.clientHeight

 

 

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

檢測元素的尺度

你發現有多個屬性可以用來檢測元素的寬和高了，但是使用哪一個才是你想要的有點棘手。下面將會協助你進行選擇。

 

 

 

 

 

CSS中的高度