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

Question

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

样式.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 .