Angular 5 |获取元素点击高度

Question

我目前正在尝试获取我在侧边栏中单击以显示子菜单的元素的高度。我目前有这个代码...

<li (click)="newsExpanded = !newsExpanded; getMargin($event)" style="margin-bottom: 50px;">
    <a>
        <i class="fa fa-newspaper"></i>
            <span>News</span>
            <i class="fa fa-angle-left sidebar__sub_menu_icon"></i>
            <ul class="sidebar__sub_menu" [class.expanded]="newsExpanded">
                 <li>
                     <a>Create New Post</a>
                 </li>
                 <li>
                     <a>View All Posts</a>
                </li>
           </ul>
     </a>
</li>

因此，当新闻被展开时，它添加了展开的 class，它只在子菜单上显示块，这工作正常，但我想在单击时向内部 ul 添加边距底部外里。这必须是内部 ul 的高度。你可以看到我已经完成了 getMargin 的 class 但是，这目前没有做任何事情，这就是我想要弄清楚的。

任何帮助将不胜感激，如果他们是更好的方法，请告诉我，我是 Angular 的新手，所以我很感激任何反馈。

Answer 1

要使用 $event 获取点击元素的高度，您应该执行以下操作：

onClick($event): void {
    let clientHeight = $event.target.clientHeight; //Height + padding without borders
    let offsetHeight = $event.target.offsetHeight; //Height + padding with borders

    //if you need the element plus margin-top/bottom
    let compStyle = window.getComputedStyle($event.target)
    clientHeight += parseInt(compStyle.getPropertyValue('margin-top'));
    clientHeight += parseInt(compStyle.getPropertyValue('margin-bottom'));
}

演示：https://stackblitz.com/edit/angular-1apnhb

这是 clientHeight and offsetHeight. Also you can take a look of scrollHeight.

的 MDN 文档

Angular 5 |获取元素点击高度

Angular 5 | Get height on element click

html

typescript

angular

angular5