Get CSS property of

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!

you can get its height by using jquery or javascript in jquery we use $('ul li'').outerHeight() something like this\ — Liaqat Saeed, Oct 23 '17 at 09:51
Check [this](https://stackoverflow.com/questions/4106538/difference-between-offsetheight-and-clientheight) out — Thum Choon Tat, Oct 23 '17 at 10:01

score 3 · Accepted Answer · answered Oct 23 '17 at 10:10

3

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
}

Get CSS property of child node with vanilla javascript

1 Answers1

Get CSS property of

child node with vanilla javascript