I have:

我有：

HTML:

Html：

<main>
  <section id="category">
    <div class="icon">About</div>
    ...
  </section>
  <section id="about">
    <article id="about_info"></article>
    ...
  </section>
</main>

It's CSS:

这是css：

main {
  grid-template   :
                      [category-start about-start] "category about"       auto     [about-end]
                      [other-start] "..." [category-end other-end]
                      / 20% auto;
  gap             :   .5em 0;
  margin          :   0;
}

main #category {
  grid-template-row : var(--about-content-height) auto 5%;
}

I will set --about-content-height dynamically as the height is changing according to whether current view is in grid mode or carousel mode, with:

我将根据当前视图处于网格模式还是旋转木马模式，在高度发生变化时动态设置--About-Content-Height，具体如下：

const main        = document.getElementsByTagName("main");
const mainStyle   = getComputedStyle(Array.from(main)[0]);
const mainHeight  = mainStyle.height.slice(0, mainStyle.height.length - 2);
const about       = document.getElementById("about");
const aboutHeight = about.clientHeight;

const height      = Math.round(about / mainHeight * 100);

document.documentElement.style.setProperty('--about-content-height', `${height}%`);

My issue lies in the line:

我的问题在于：

const mainStyle   = getComputedStyle(Array.from(main)[0]);

and

和

const mainHeight  = mainStyle.height.slice(0, mainStyle.height.length - 2);

There is difference between console.log(mainStyle) and console.log(mainStyle.height).
The correct one was within mainStyle by itself. But it's value started to be different in mainStyle.height.

Console.log(MainStyle)和console.log(mainStyle.Height)是有区别的。正确的版本本身就在mainStyle中。但它的价值在mainStyle.Height中开始不同了。

Here're the values of both the console:

以下是这两个控制台的值：

Why is there a difference between them?

为什么它们之间有区别呢？

Update

So it basically is the difference between loading of the content.

所以这基本上就是内容加载之间的区别。

setTimeout(() => {
  this.myFunction();
}, 300);

will give me the right height. window.onload or readyState === "complete" doesn't do anything.

会给我合适的身高。OnLoad或ReadyState=“Complete”不执行任何操作。

Edit

Is there any way to not use the setTimeout but to relies on the DOM finishing whatever is happening on it?

有没有办法不使用setTimeout，而是依赖于DOM来完成它上发生的任何事情？

Thanks for your answer in advance.

谢谢你提前给我答复。