無法獲取節點

Question

Fiddle

 window.addEventListener("resize", getSize); 

      function getSize(){ 
       var node = document.getElementById('sample'); 
       var height = node.style.height; 
       console.log('height: ', height);//expect 100px, get nothing 
      } 

    #sample { 
    padding: 20px; 
    height: 100px; 
    overflow-y: auto; 
    border: solid blue; 
    margin: 10px 300px 10px 25px; 
    position: 'relative' 

} 

node.style.height的高度總是空/空。請注意，我將高度設置爲100px。爲什麼？我怎樣才能獲得節點的CSS高度？

Answer 1

您需要使用clientHeight這是會計算CSS height + CSS padding

Client Height JSFiddle Example

Docs

Answer 2

要獲得元素的高度（無邊距），請使用element.offsetHeight。

要直接訪問CSS屬性，你必須使用getComputedStyle：

const node = document.getElementById('lorem'); 
const styles = getComputedStyle(node); 
const height = styles.height;