Unable to get height of node

Question

        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 is always empty/null. Note that I set the height to 100px. Why? How can I get the css height of the node?

Note you still need to use `node.style.height = '1000px';` for setting values. Setting `offsetHeight` does not work. — P.Brian.Mackey, Jul 21 '16 at 15:41

score 1 · Answer 1 · answered Jul 21 '16 at 15:36

To get the height (without margins) of an element use element.offsetHeight.

To access CSS properties directly you have to use getComputedStyle:

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

score 1 · Accepted Answer · answered Jul 21 '16 at 15:38

1

You need to use clientHeight which is going to compute CSS height + CSS padding

Client Height JSFiddle Example

Docs

answered Jul 21 '16 at 15:38

David Strada

130
11

Unable to get height of node

2 Answers2