如何在postRender()中获取div的高度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (76)

我有一个postRender函数,它有一个事件监听器,当用户向下滚动页面时,它会将固定类添加到元素中。将元素固定到页面会创建一个间隙,使所有后续元素看起来像“跳”起来。我的想法是创建一个空div,它将具有固定div的高度,并在滚动事件发生时取而代之,以便删除“跳转”。

我的问题是,当我在事件执行时检查控制台中的chpCard组件(参见'chpTarget'var)时,该元素似乎没有宽度/高度进行渲染。我已经检查了它的offsetHeight并且它返回到0.但是当我用Lightning完成后再次检查它时,我得到了具有正确值的offsetHeight。所以我的问题是:我怎么能获得高度?是不是afterRender意味着在DOM中使用的所有内容都已准备就绪?为什么渲染为0高度元素?

这是CMP:

<lightning:card class="slds-page-header slds-page-header_object-home" aura:id="chpCard">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
</lightning:card>

这是渲染方法

afterRender: function(component, helper) {
    this.superAfterRender();

    window.addEventListener('scroll', function (event) {
        var chpTarget = component.find('chpCard');
        var wrapper = component.find('chpWrapper');

        if (event.srcElement.documentElement.scrollTop > 12) {
            $A.util.addClass(chpTarget, 'slds-is-fixed');
        } else {
            $A.util.removeClass(chpTarget, 'slds-is-fixed');
        }
    });
}
提问于
用户回答回答于

弄明白了。你需要得到具体的成分,并深入研究,以获得值。

component.getConcreteComponent().getElements()

将返回基div。还有一个getElement()方法来获取特定的元素。

扫码关注云+社区

领取腾讯云代金券