如何获取< div>的渲染大小 [英] How to get the rendered size of a <div>

问题描述

我有一个 FlowPanel ，它的高度是固定的（它实际上是它父级高度的一个百分比，它是固定的）。面板中，我添加了几个 div 元素。使用CSS，我将它的高度设置为其父类的100％。

我想要做的就是使用javascript将其宽度设置为等于其高度。

我遇到的问题是，我不知道何时运行这一点的JavaScript。我尝试将它添加到我的容器的 onLoad（）方法中，但高度还未知（ getOffsetHeight（）返回0）。

我看过类似的问题（例如 GWT - 检索未显示的小部件的大小），但它们并不完全相同。

解决方案

推迟到 getOffsetHeight（）的调用，直到事件循环结束：

  @Override 
 public void onLoad（）{
 Scheduler.get（）。scheduleDeferred（new ScheduledCommand（）{
 @Override 
 public void execute（）{
 //获取并使用元素的offsetHeight。
} 
} 
} 
  

I have a FlowPanel, whose height is fixed (it is actually a percentage of its parent's height, which is fixed).
In this panel, I add several div elements. Using CSS, I set its height as 100% of its parent.
What I want to do is set its width to be equal to its height using javascript.

The issue I have is that I don't know when to run this bit of javascript. I tried adding it to the onLoad() method of my container, but the height is not known yet (getOffsetHeight() returns 0).

I had a look at similar questions (like GWT - Retrieve size of a widget that is not displayed), but they were not exactly the same thing.

解决方案

Defer the call to getOffsetHeight() until the end of the event loop:

@Override
public void onLoad() {
  Scheduler.get().scheduleDeferred(new ScheduledCommand() {
    @Override
    public void execute() {
      // Get and work with the element's offsetHeight.
    }
  }
}

这篇关于如何获取< div>的渲染大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！