使用vanilla javascript获取<ul> <li>子节点的CSS属性

Question

如何获取节点的子元素的CSS属性？ 我想获得<li>

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

我更喜欢使用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
}

另见this answer。