獲取CSS屬性 <ul><li> 子節點與香草javascript

Question

如何獲取節點的子元素的CSS屬性？ 我想獲得<ul>的<li>元素的高度

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*/);

我更喜歡使用vanilla JavaScript的解決方案而不使用jQuery！

Answer 1

對於你的情況，html看起來像：

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

和css：

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

ul.menu li {
  height: 28px;
}

你的工作javascript應該是：

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
}

另見這個答案 。