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始终为空/ null。请注意，我将高度设置为100px。为什么？如何获得节点的css高度？

Answer 1

要获得元素的高度（没有边距），请使用element.offsetHeight。

要直接访问CSS属性，您必须使用getComputedStyle：

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

Answer 2

您需要使用计算clientHeight

的CSS height + CSS padding

Client Height JSFiddle Example

Docs

无法获得节点的高度

2 个答案: