Get CSS property of <ul> <li> child node with vanilla javascript

Question

How can I get CSS properties of an child element of a node? I want to get the height of the <li> element of a <ul>

style.scss

ul.menu {
   width: 100%;
   float: left;
   li {
      height: 28px;
    }
}

javascript

let elementList = this.dropdownMenu.nativeElement.children;
console.log(elementList.length);
console.log(/*height of li*/);

I prefer solutions with vanilla JavaScript without using jQuery!

Answer 1

For your case, where the html looks like:

<ul class="menu">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

And css:

ul.menu {
   width: 100%;
   float: left;
}

ul.menu li {
  height: 28px;
}

Your working javascript should be:

var list = document.getElementsByClassName("menu")[0];

for (var i = 0; i < list.children.length; ++i) {
    var clientHeight = list.children[i].clientHeight,
        offsetHeight = list.children[i].offsetHeight;
    console.log(clientHeight); // with padding
    console.log(offsetHeight); // with borders
}

See also this answer .