基于offsetHeight和clientHeight判斷是否出現滾動條
by:授客 QQ：1033553122
HTMLEelement.offsetHeight簡介
HTMLElement.offsetHeight 是一個只讀屬性，它回傳該元素的像素高度，高度包含該元素的垂直內邊距和邊框，且是一個整數，
通常，元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條（如果存在且渲染的話），不包含:before或:after等偽類元素的高度，
對于檔案的body物件，它包括代替元素的CSS高度線性總含量高，浮動元素的向下延伸內容高度是被忽略的，
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight
HTMLEelement.clientHeight簡介
這個屬性是只讀屬性，對于沒有定義CSS或者行內布局盒子的元素為0，否則，它是元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距，
clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
HTMLEelement.offsetWidth簡介
是一個只讀屬性，回傳一個元素的布局寬度，一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設定的寬度(width)的值，
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
HTMLEelement.clientHeight簡介
行內元素以及沒有 CSS 樣式的元素的 clientWidth 屬性值為 0，Element.clientWidth 屬性表示元素的內部寬度，以像素計，該屬性包括內邊距，但不包括垂直滾動條（如果有）、邊框和外邊距，
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth
判斷目標元素是否出現滾動條
targetElement為目標html元素，以下代碼用于判斷該元素內是否出現滾動條
if (targetElement.offsetHeight > targetElement.clientHeight &&
targetElement.offsetWidth > targetElement.clientWidth
) {
console.log("出現水平 & 垂直滾動條");
}
if (tableBody.offsetWidth > tableBody.clientWidth) {
console.log("出現垂直滾動條");
}
if (obj.offsetHeight>obj.clientHeight) {
console.log("出現水平滾動條");
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168611.html
標籤：JavaScript
上一篇：webpack管理輸出
下一篇：for回圈的更多寫法